如何在Angular的mat-select的selectionChange中使用ngFor的item变量？

你遇到的核心问题是item变量的作用域仅存在于*ngFor循环的mat-option内部，mat-select的selectionChange事件无法直接访问该变量。以下是两种可靠的解决方式：

方法一：通过事件参数的value匹配对应item #

将selectionChange的事件参数传入处理方法，利用选中的value（即item.name）从entities数组中匹配出完整的item对象：

模板代码 #

<mat-select [(ngModel)]="e1Instance" (selectionChange)="e1InstanceChanged($event)">
  <mat-option *ngFor="let item of entities" [value]="item.name">
    {{item.name}}
  </mat-option>
</mat-select>

组件逻辑 #

import { MatSelectChange } from '@angular/material/select';

// 替换YourEntity为你的实体类型
e1InstanceChanged(event: MatSelectChange) {
  const selectedItem = this.entities.find(item => item.name === event.value);
  if (selectedItem) {
    // 在这里使用selectedItem执行后续操作
    console.log('选中项:', selectedItem);
  }
}

方法二：直接绑定item对象作为option的value #

把mat-option的value绑定为整个item对象，这样selectionChange事件可以直接拿到选中的item，无需额外查找：

模板代码 #

<mat-select [(ngModel)]="e1Instance" (selectionChange)="e1InstanceChanged($event.value)">
  <mat-option *ngFor="let item of entities" [value]="item">
    {{item.name}}
  </mat-option>
</mat-select>

组件逻辑 #

// 确保e1Instance的类型与你的实体类型一致
e1InstanceChanged(selectedItem: YourEntity) {
  // 直接使用选中的item对象
  console.log('选中项:', selectedItem);
}

注意：采用这种方式时，ngModel绑定的e1Instance会是实体对象类型，需同步调整组件中对应变量的类型定义；同时Angular会通过对象引用来判断选中状态，要确保entities数组中的对象引用稳定。

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