Angular：与循环内构造的属性名称进行属性绑定

Question

我有多个房产

tier1_eligibility: FormControl<boolean>;
tier2_eligibility: FormControl<boolean>;
tier3_eligibility: FormControl<boolean>;

我想将其绑定到复选框。我怎样才能用

ngFor

做到这一点？我试过：

<mat-checkbox *ngFor="let tier of [1,2,3]"
      [formControl]="myForm.controls.tier{{tier}}_eligibility"    <- Problem here !!
></mat-checkbox>

但是它不起作用 - 这是用适当的数字替换

{{tier}}

的问题。合适的语法是什么？

Answer 1

假设

<mat-checkbox>

被包裹在

FormGroup

中，你可以用

formControlName

代替`[formControl]``。

<form [formGroup]="myForm">
  <mat-checkbox 
    *ngFor="let tier of [1,2,3]"
    formControlName="tier{{tier}}_eligibility">
  </mat-checkbox>
</form>

演示@StackBlitz