在Angular的ngFor/ngIf中如何通过复选框选中状态控制表单域显示？

问题根源 #

你当前的问题出在两个核心错误：

• 模板引用变量不能用插值表达式动态命名（#{{item.name}}属于无效写法）
• item.name.checked错误地将字符串类型的item.name当成复选框实例，自然无法获取checked状态

推荐方案：绑定复选框状态到数组项（响应式且易维护） #

这种方式无需依赖模板引用变量，直接把复选框选中状态绑定到数组元素的属性上，逻辑清晰且易于维护。

1. 更新数组结构，给需要复选框的项添加checked属性（初始值设为false）：

const List: Array<Item> = [
  { id: 1, name: 'somename1' }, // id<=4，无复选框
  { id: 5, name: 'somename5', checked: false, class: 'hide' }, // id>4，带复选框且默认隐藏
  { id: 6, name: 'somename6', checked: false },
  // ...其他项
];

2. 修改模板代码，用双向绑定关联复选框状态，同时根据状态控制表单域显示：

<ng-container *ngFor="let item of list; let i = index;">
  <div class="grid">
    <!-- 复选框：仅id>4时显示，绑定选中状态到item.checked，同时处理隐藏类 -->
    <mat-checkbox 
      *ngIf="item.id > 4"
      [(ngModel)]="item.checked"
      [class.hide]="item.class === 'hide'"
      type="checkbox">
    </mat-checkbox>

    <!-- id<=4的表单域：始终显示 -->
    <mat-form-field *ngIf="item.id <= 4">
      <input formControlName="{{item.name}}" matInput type="number"/>
    </mat-form-field>
        
    <!-- id>4的表单域：仅复选框选中时显示 -->
    <mat-form-field *ngIf="item.id > 4 && item.checked">
      <input formControlName="{{item.name}}" matInput type="number"/>
    </mat-form-field>
  </div>
</ng-container>

备选方案：使用模板引用变量（不修改数组结构） #

如果不想改动原始数组，可以利用NgFor的索引和模板引用变量关联状态：

<ng-container *ngFor="let item of list; let i = index;">
  <div class="grid">
    <mat-checkbox 
      *ngIf="item.id > 4"
      #checkbox
      [class.hide]="item.class === 'hide'"
      type="checkbox">
    </mat-checkbox>

    <mat-form-field *ngIf="item.id <= 4">
      <input formControlName="{{item.name}}" matInput type="number"/>
    </mat-form-field>
        
    <!-- 直接引用当前循环内的checkbox实例的checked状态，用?.避免空值报错 -->
    <mat-form-field *ngIf="item.id > 4 && checkbox?.checked">
      <input formControlName="{{item.name}}" matInput type="number"/>
    </mat-form-field>
  </div>
</ng-container>

补充：SCSS隐藏样式保持不变 #

.hide {
    display: none;
}

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