未定义标识符“ ....”。 '__type'不包含这样的成员Angular FormArray

Question

我正在使用反应形式使用FormArray创建多个复选框，但是当我在模板中使用它时出现此错误：

  

未定义标识符“ roleNames”。 '__type'不包含此类   一个memberAngular

这是我的htmlCode：

<form [formGroup]="createUserFormGroup" (ngSubmit)="submit()">
    <label formArrayName="roleNames"
        *ngFor="let role of createUserFormGroup.controls.roleNames.controls; let i = index">
        <input type="checkbox" [formControlName]="i">
        {{role[i].displayName}}
    </label>
    <button>submit</button>
</form>

这是我的打字稿代码：

constructor(
public _userService: UserServiceProxy,
private _ouServiceProxy: OuServiceProxy,
private managetableService: ManageTablesService<UserDto>,
private formBuilder: FormBuilder) 
{
this.createUserFormGroup = this.formBuilder.group({
  'roleNames': new FormArray([]),
});  }

    this._userService.getRoles().subscribe(result => {
  this.roles = result["result"].items;
  this.addRoleCheckBoxes();
  // this.setInitialRolesStatus();
});

  addRoleCheckBoxes() {
debugger;
this.roles.map((roleDto, index) => {
  const control = new FormControl(index === 0);
  (this.createUserFormGroup.controls.roleNames as FormArray).push(control);
});

Answer 1

尝试如下更新HTML：

<form [formGroup]="createUserFormGroup" (ngSubmit)="submit()">
    <label [formGroup]="role"
        *ngFor="let role of createUserFormGroup.controls.roleNames.controls; let i = index">
        <input type="checkbox" [formControlName]="i">
        {{role[i].displayName}}
    </label>
    <button>submit</button>
</form>

Answer 2

您的* ngFor应该是这样

*ngFor="let role of createUserFormGroup.get('roleNames')['controls']; let i = index"

不是这样

*ngFor="let role of createUserFormGroup.controls.roleNames.controls; let i = index"

并使用动态数组

<div [formGroupName]="i">
   <input type="checkbox" [formControlName]="your control name"> // not the index of the arra
    {{role[i].displayName}}
</div>

Answer 3

我发现了问题

我必须使用角色更改此代码

{{roles[i].displayName}}

否     {{role [i] .displayName}}

实际上，在formArray中，我们只有formControls的数量，没有复选框的值，我们必须从另一个地方添加值