Angular中如何为表格内的mat-select元素设置唯一标识符

关键说明：Angular不支持动态模板引用变量名 #

Angular模板引用变量是静态解析的，无法直接通过#drop{{n}}这种方式生成drop1、drop2这类动态命名的引用。不过有两种可行方案实现需求：

方案1：利用结构指令上下文隔离（模板内直接使用） #

在*matCellDef的作用域中，每一行的模板是独立实例化的，因此同一个#drop引用变量在不同行里指向的是当前行的mat-select，不会出现冲突。

你可以直接保留原模板的#drop，模板内的引用逻辑完全有效，不需要修改：

<mat-select [(ngModel)]="value"
  #drop
  placeholder="Select numbers"
  multiple
>
  <mat-select-trigger *ngIf="drop.value && drop.value.length">
    {{getDropTextBoxValue(drop, n)}}
  </mat-select-trigger>
  
  <mat-option #all (click)="onClick(all, drop)" [value]="null">
    Select all
  </mat-option>
  
  <mat-option *ngFor="let num of allNums[n]" 
    [value]="num"  
    (click)="onClick(null, drop, n)"
  >{{num}}</mat-option>
</mat-select>

方案2：通过ViewChildren获取实例（组件类中按索引访问） #

如果需要在组件类中操作特定行的mat-select（比如根据索引n获取对应下拉框），可以用@ViewChildren批量获取所有实例：

1. 模板调整 #

给所有mat-select设置统一的模板引用变量（比如#drops），并指定为matSelect类型：

<mat-select [(ngModel)]="value"
  #drops="matSelect"
  placeholder="Select numbers"
  multiple
>
  <mat-select-trigger *ngIf="drops.value && drops.value.length">
    {{getDropTextBoxValue(drops, n)}}
  </mat-select-trigger>
  
  <mat-option #all (click)="onClick(all, drops)" [value]="null">
    Select all
  </mat-option>
  
  <mat-option *ngFor="let num of allNums[n]" 
    [value]="num"  
    (click)="onClick(null, drops, n)"
  >{{num}}</mat-option>
</mat-select>

2. 组件类代码 #

导入相关依赖并获取实例列表：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChildren('drops') dropList!: QueryList<MatSelect>;

  // 根据索引获取对应行的mat-select
  getDropInstance(index: number): MatSelect | undefined {
    return this.dropList.toArray()[index];
  }
}

模板内引用替换说明 #

• 若用方案1：无需替换，直接保留drop即可。
• 若用方案2：将所有**drop**替换为你设置的统一变量名（比如drops）。

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