Angular中如何在(valueChange)事件传递选中的mat-option值到函数

没问题，我来帮你调整代码，实现把选中的选项名称传给changeStatus()函数的需求，这里有两种简单直接的方式：

方式一：直接传递选项名称（最贴合你的需求） #

给每个<mat-option>绑定[value]="i.name"，然后在valueChange事件里用$event获取选中的名称，替换原来的list.name：

<mat-form-field>
  <mat-select (valueChange)="changeStatus($event, card.name)">
    <mat-option *ngFor="let i of lists" [value]="i.name">
      {{i.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

原理说明： #

• [value]="i.name"会把每个选项的值设置为对应的i.name
• 当你选中某个选项时，valueChange事件会自动把选中的value（也就是i.name）作为$event参数传递给changeStatus，这样第一个参数就是你选中的选项名称了。

方式二：传递整个选项对象（适合需要更多属性的场景） #

如果你后续可能需要用到i的其他属性，可以把选项的值绑定为整个i对象，然后在函数里提取名称：

<mat-form-field>
  <mat-select (valueChange)="changeStatus($event.name, card.name)">
    <mat-option *ngFor="let i of lists" [value]="i">
      {{i.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

原理说明： #

• [value]="i"把选项的值设置为整个i对象
• 选中时$event就是这个对象，所以用$event.name就能拿到选项名称，同时你也可以在函数里使用$event的其他属性（比如i.id之类的）。

这两种方式都能完美解决你的问题，根据你的实际需求选一个就行~

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