根据数组动态生成复选框列表并显示
Dynamically generate list of checkboxs based on array and display them
我正在使用 ReativeForms。我有一个数组,其中包含我想显示为复选框的值。这是我的:
dietaryRestrictionList 包含
- 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
我怎样才能让它工作?
因为你不能在 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>
我正在使用 ReativeForms。我有一个数组,其中包含我想显示为复选框的值。这是我的:
dietaryRestrictionList 包含
- 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
我怎样才能让它工作?
因为你不能在 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>