Question

我正在为我的用户角色尝试显示复选框：

例如。我有两个用户角色：1.Admin 2.Employee

我在userObject中有一系列角色：

user={
    "name":"Bhushan",
    "email":"bhushan@yaho.com",
    "roles":['Admin','Employee']
}

我想使用反应式表单将此模型填充到表单中。我想将roles数组填充到只读复选框中，即在表单加载时，用户可以编辑名称和数据。电子邮件，但如果用户具有管理员角色，则复选框将显示admin toggeled;如果用户不是管理员，则复选框将显示为<form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate> <div style="margin-bottom: 1em"> <button type="submit" [disabled]="userForm.pristine" class="btn btn-success">Save</button>   <button type="reset" (click)="revert()" [disabled]="userForm.pristine" class="btn btn-danger">Revert</button> </div> <div class="form-group"> <label class="center-block">Name: <input class="form-control" formControlName="name"> </label> </div> <div class="form-group"> <label class="center-block">Email: <input class="form-control" formControlName="email"> </label> </div> <div class="form-group" *ngFor="let role of roles;let i=index"> <label> // I tried this, but it doesn't work  {{role}} </label> </div> </form> <p>userForm value: {{ userForm.value | json}}</p>`。员工角色也是如此。

到目前为止，我已尝试过以下内容：

create or replace procedure back_end_proc(p_rc OUT SYS_REFCURSOR) is
     v_script   VARCHAR2(4000); begin
     v_script := 'select sysdate data from dual where ''a'' = :a union all select sysdate-1 data from dual where ''b'' = :b';
     open p_rc  for v_script using 'a','b'; end;

任何输入？

Answer 1

也许做以下事情。构建表单，并将角色粘贴在表单数组中：

this.userForm = this.fb.group({
  name: [this.user.name],
  roles: this.fb.array(this.user.roles || [])
});

// OPTIONAL: put the different controls in variables
this.nameCtrl = this.userForm.controls.name;
this.rolesCtrl = this.userForm.controls.roles.controls;

并且您在模板中迭代的角色数组可能如下所示：

roles = ['Admin', 'Employee','Some role 1', 'Some role 2']

并在迭代中只比较并设置role数组中的roles，如果它匹配表单数组中的值。使用安全导航操作符，因为我们知道roles数组可能比表单数组长，因此在尝试读取不存在的索引时不会抛出错误：

<div class="form-group" *ngFor="let role of roles;let i=index">
  <input [checked]="role == rolesCtrl[i]?.value" 
     [disabled]="true" type="checkbox">{{role}}
</div>

<强> DEMO

Angular 4：如何在反应形式中将字符串数组分配到复选框中

1 个答案: