動的チェックボックスがロードされていません

Question

私は、検証を実行したいデータベースからロードされた 'ビジネスユニット'のチェックボックスのグループを持っています。

DBから値が正常に戻ったにもかかわらず、表示していない瞬間にセットアップしています。

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> 

なぜ値が表示されないのですか？ これを修正するにはどうすればよいですか？

おかげでちょうど指標であるべき配列項目を参照formControlName私の知る限り

Answer 1

問題は、コンストラクタがngOnInitの前に呼び出されることです。つまり、データが読み込まれる前にフォームが作成されます。エラーについて何も言わなかったので、businessUnitsを空の配列に初期化していると思われます。

問題を解決する1つの方法は、初期化ロジックをサブスクライブに移動することです。これにより、データが確実に読み込まれます。

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

：

<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'がインデックスの代わりに名前として使用されます。