动态复选框未加载

Question

我有一组从数据库中加载的“业务单位”复选框，我想对其执行验证。

正如我现在设置的那样，即使值确实从数据库成功返回，它们也没有显示。

ngOnInit() {
    this.commServe.getBusinessUnitsOnly().subscribe((data) => {
        this.businessUnits = data;
    },
        (error) => {
            this.errorMessage = <any>error;
        })
}

formgroup 在构造函数中初始化

this.registrationForm = fb.group({

        "firstName": new FormControl('', [Validators.required]),
        "lastName": new FormControl('', [Validators.required]),
        "password": new FormControl('', [Validators.required]),
        "confirmPassword": new FormControl('', [Validators.required]),
        bUnits: this.fb.array(
            this.businessUnits.map(() => this.fb.control('')),
            CustomValidators.multipleCheckboxRequireOne
        )

    })

这是标记

 <div formArrayName="bUnits">
    <div class="checkbox"*ngFor="let unit of registrationForm.controls.bUnits.controls; let i = index;">
      <label><input type="checkbox" #instance  formControlName="i" (click)="getCheckBoxValue(instance.checked, businessUnits[i].BuName)">{{ businessUnits[i].BuName}}</label>
    </div>
  </div>

为什么不显示值？ 我该如何解决这个问题？

谢谢

Answer 1

问题是构造函数在ngOnInit 之前被调用。这意味着您的表单是在数据加载之前创建的。由于您没有说明任何错误，我怀疑您将 businessUnits 初始化为一个空数组。

解决问题的一种方法是将初始化逻辑移至订阅。这将确保加载数据：

this.commServe.getBusinessUnitsOnly().subscribe((data) => {
    this.businessUnits = data;
    this.registrationForm
        .setControl("bUnits", this.fb.array(
            this.businessUnits.map(() => this.fb.control('')),
            CustomValidators.multipleCheckboxRequireOne))
},
    (error) => {
        this.errorMessage = <any>error;
    })

Answer 2

AFAIK 引用数组项的formControlName 应该只是索引：

  <label><input type="checkbox" #instance  [formControlName]="i" (click)="getCheckBoxValue(instance.checked, businessUnits[i].BuName)">{{ businessUnits[i].BuName}}</label>

另见https://angular.io/docs/ts/latest/guide/reactive-forms.html#!#form-array

Plunker example

formControlName="i"

应该是

[formControlName]="i"

否则字符串'i' 将用作名称而不是索引。