Angular 基于数组动态生成复选框列表并显示它们

Angular 基于数组动态生成复选框列表并显示它们,angular,reactive-forms,Angular,Reactive Forms,我用的是ReativeForms。我有一个数组,其中包含要显示为复选框的值。这就是我所拥有的: 饮食限制清单包括 RestrictionType:string=应该是复选框的名称 IsChecked:boolean=是否选中 在ngOnInit中,我初始化数组 this.healthInfoForm = this._fb.group( { dietaryRestrictionList: this._fb.array([]), }); 当我获取数据时,我执行for循环,设置值: >

我用的是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>
我试图遵循以下示例:

事情没有进展。我得到一个错误,上面写着:

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局部变量,所以你必须这样做才能实现这一点

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

现在我得到了一个更进一步的错误:内联模板:270:55,原因是:找不到具有未指定名称AttributeEyes的控件,因为您动态提供的控件名称在组件中的任何位置都不存在,因此抛出此错误,我想您需要使用formarray,在这种情况下我不太理解。我用的是正装。