0

ReativeForms を使用しています。チェックボックスとして表示したい値を持つ配列があります。これは私が持っているものです:

食事制限リストは以下で構成されます

  • RestrictionType: string = チェックボックスの名前にする必要があります
  • IsChecked: boolean = チェックされているかどうか

私の ngOnInit() で、配列を初期化します。

this.healthInfoForm = this._fb.group(
{
    dietaryRestrictionList: this._fb.array([]),
});

データを取得したら、for ループを実行して値を設定します。

> const control =
> <FormArray>this.healthInfoForm.controls['dietaryRestrictionList']; 
> for(var i = 0; i < this.dietaryRestrictionList.length; i++){
>     let checkBoxLabel = this.dietaryRestrictionList[i].RestrictionType;  
> control.push(this._fb.group({
>         checkBoxLabel: this.dietaryRestrictionList[i].IsChecked// set whether it's checked or not
>     }))   }

これをhtmlページに表示したい：

        <div formArrayName="dietaryRestrictionList" class="form-group">
            <div *ngFor="let diet of healthInfoForm.controls.dietaryRestrictionList.controls; let i=index" > 
                <div [formGroupName]="i">                               
                  <label>
                      <input type="checkbox" [formControl]="let diet of healthInfoForm.controls.[diet.boxName]" class="form-control">                              
                  </label>  
                </div>  
            </div>
        </div>

私はこの例に従おうとしています: https://scotch.io/tutorials/angular-2-form-validation

物事が機能していません。次のようなエラーが表示されます。

Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token let at column 1 in [let diet of 
        healthInfoForm.controls.[diet.boxName]] in HealthInformationComponent@270:53 ("          
    <label><input type="checkbox" [ERROR ->][formControl]="let diet of healthInfoForm.controls.[diet.boxName]" class="form-control">"): HealthInformationComponent@270:53

どうすればこれを機能させることができますか？

4

1 に答える 1

1

let内部でangular2のローカル変数を使用できないためformControl、これを達成するにはこのようにする必要があります

<div formArrayName="dietaryRestrictionList" class="form-group">
    <div *ngFor="let diet of healthInfoForm.controls.dietaryRestrictionList.controls; let i=index" > 
        <div [formGroupName]="i">                               
          <label>
              <input type="checkbox" [formControl]="diet[i]" class="form-control">
          </label>  
        </div>  
    </div>
</div>
于 2017-03-06T10:14:44.060 に答える