Angular如何在ngFor循环中绑定动态构造名称的表单控件属性

这个问题其实挺常见的，核心在于Angular的属性绑定（比如[formControl]）不能直接用插值语法{{}}来拼接对象属性名——属性绑定需要的是合法表达式，而非文本插值的结果。我给你几个可行的解决方案：

方案一：直接在模板中用动态属性访问（最快捷） #

利用JavaScript对象的方括号访问语法，直接在模板里拼接控件名称字符串，就能获取对应的FormControl：

<mat-checkbox *ngFor="let tier of [1,2,3]" 
              [formControl]="myForm.controls['tier' + tier + '_eligibility']">
  Tier {{ tier }} 资格
</mat-checkbox>

这种写法不用修改组件类代码，直接在模板里实现动态绑定。不过要确保每个tierX_eligibility控件确实存在于myForm中，否则会抛出undefined错误。

方案二：使用FormGroup的get()方法（更安全） #

Angular的FormGroup提供了get()方法获取控件，这个方法找不到控件时会返回null（不会直接报错），比直接访问controls属性更稳健：

<mat-checkbox *ngFor="let tier of [1,2,3]" 
              [formControl]="myForm.get('tier' + tier + '_eligibility')">
  Tier {{ tier }} 资格
</mat-checkbox>

如果你的表单结构可能变化，或者想避免因控件不存在导致的报错，推荐用这个方式。

方案三：在组件类中预先整理控件数组（最清晰） #

要是觉得模板里的字符串拼接不够直观，可以在组件类里先把需要循环的控件整理成数组，再直接循环这个数组：

组件类代码： #

// 假设你已经在组件里定义了这三个FormControl
tier1_eligibility: FormControl<boolean>;
tier2_eligibility: FormControl<boolean>;
tier3_eligibility: FormControl<boolean>;

// 预先整理控件数组
tierControls = [
  { tierNumber: 1, control: this.tier1_eligibility },
  { tierNumber: 2, control: this.tier2_eligibility },
  { tierNumber: 3, control: this.tier3_eligibility }
];

模板代码： #

<mat-checkbox *ngFor="let tierItem of tierControls" 
              [formControl]="tierItem.control">
  Tier {{ tierItem.tierNumber }} 资格
</mat-checkbox>

这种方式可读性最强，后续如果要新增更多tier控件，只需要在tierControls数组里添加新项即可，模板不需要改动，非常易于维护。

备注：内容来源于stack exchange，提问作者Dejan