배열을 기반으로 체크 박스 목록을 동적으로 생성하고 표시합니다.

Question

ReativeForms를 사용하고 있습니다. 체크 박스로 표시하고 싶은 값을 가진 배열이 있습니다.

가의 IsChecked 체크 박스의 이름이어야 문자열 = :

dietaryRestrictionList이

• RestrictionType 구성이 확인 됨 부울 = 여부를

이 내가 가진 무엇 내 ngOnInit() 내 배열을 초기화합니다.

> 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 페이지에이를 표시하려면 : 내가 데이터를 얻을 때

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

내가 값을 설정 for 루프를 할

 <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 

어떻게 작동합니까? 당신이 formControl 내부 angular2의 let 로컬 변수를 사용할 수 없습니다 변경할 수 없기

Answer 1

, 당신은 지금 말한다 내가 더 오류가이

<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>