Angular如何在*ngIf中拼接索引i与agreement变量进行判断？

嘿，这个问题我之前做动态表单的时候也碰到过～Angular模板里没法直接通过拼接变量名来访问组件属性，得换个更规范的思路来处理，核心就是用数组来管理你的agreement控件，然后通过索引i直接访问对应元素就行，给你两种常见场景的实现方式：

场景1：组件维护普通表单控件数组 #

如果你的agreement是单个表单控件（比如FormControl），直接把它们放到数组里管理：

组件类代码 #

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 把单个agreement改成数组，每个元素对应一个表单控件
  agreements: FormControl[] = [
    new FormControl('', Validators.required),
    new FormControl('', Validators.required),
    // 后续可以动态push新的控件进去
  ];
}

模板代码 #

循环的时候通过索引i直接访问数组里的对应元素：

<div *ngFor="let item of agreements; let i = index">
  <input [formControl]="item" placeholder="请输入协议内容">
  <!-- 这里用agreements[i]获取对应索引的控件，再判断required错误 -->
  <div *ngIf="agreements[i].errors?.required" style="color: red;">
    此字段为必填项！
  </div>
</div>

场景2：用FormArray管理动态表单（推荐方案） #

如果是用Angular响应式表单做动态生成的表单组，更推荐用FormArray来管理，这是Angular官方推荐的动态表单实现方式：

组件类代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，包含一个存储协议控件的FormArray
    this.myForm = this.fb.group({
      agreements: this.fb.array([
        this.fb.control('', Validators.required),
        this.fb.control('', Validators.required)
      ])
    });
  }

  // 封装一个获取FormArray的方法，方便模板调用
  get agreementsArray(): FormArray {
    return this.myForm.get('agreements') as FormArray;
  }
}

模板代码 #

通过FormArray的at(i)方法获取对应索引的控件，再判断错误：

<form [formGroup]="myForm">
  <div *ngFor="let ctrl of agreementsArray.controls; let i = index">
    <input [formControl]="ctrl" placeholder="请输入协议内容">
    <!-- 用at(i)精准获取对应索引的表单控件 -->
    <div *ngIf="agreementsArray.at(i).errors?.required" style="color: red;">
      此字段为必填项！
    </div>
  </div>
</form>

补充说明 #

为什么不能直接拼变量名？因为Angular模板里的变量是绑定到组件类的属性的，没法像原生JS那样通过window['agreement' + i]这种方式动态访问属性，用数组管理是最符合Angular规范且易维护的方案。

内容的提问来源于stack exchange，提问作者NewDeveloper