Angular中能否在mat-select的mat-option模板端直接检查onSelectionChange的$event而无需编写TS代码？

当然可以做到！Angular的模板支持直接在事件绑定中使用表达式逻辑，包括三元运算符、逻辑与/或等，完全能满足你在模板端过滤onSelectionChange事件的需求。

核心原因回顾 #

之所以需要检查$event.isUserInput，是因为当你切换mat-select的选项时，前一个被取消选中的选项也会触发onSelectionChange事件，但此时isUserInput为false；只有用户主动选中的新选项触发的事件中，isUserInput才是true。我们需要过滤掉前者，只处理用户主动选择的情况。

模板端直接实现的写法 #

下面是几种常见的实现方式，你可以根据需求选择：

1. 只处理用户主动选中的情况（逻辑与&&）

如果只需要在用户选中选项时执行操作（忽略取消选中的事件），可以用逻辑与运算符，只有$event.isUserInput为true时才执行后续代码：

<mat-select>
  <mat-option 
    (onSelectionChange)="$event.isUserInput && console.log('Meta Signal Changed to ' + metaSignal.name)"
    *ngFor="let metaSignal of metaSignals" 
    [value]="metaSignal"
  >
    {{ metaSignal.name }}
  </mat-option>
</mat-select>

2. 区分选中/取消选中的操作（三元运算符）

如果需要分别处理选中和取消选中的逻辑，可以用三元表达式：

<mat-select>
  <mat-option 
    (onSelectionChange)="$event.isUserInput ? 
      console.log('Selected: ' + metaSignal.name) : 
      console.log('Deselected: ' + metaSignal.name)"
    *ngFor="let metaSignal of metaSignals" 
    [value]="metaSignal"
  >
    {{ metaSignal.name }}
  </mat-option>
</mat-select>

3. 执行多个操作（用括号包裹多语句）

如果需要在满足条件时执行多个操作，可以用括号把语句包裹起来，用逗号分隔：

<mat-select [(value)]="selectedMetaSignal">
  <mat-option 
    (onSelectionChange)="$event.isUserInput ? 
      (console.log('Selected: ' + metaSignal.name), selectedMetaSignal = metaSignal) : 
      null"
    *ngFor="let metaSignal of metaSignals" 
    [value]="metaSignal"
  >
    {{ metaSignal.name }}
  </mat-option>
</mat-select>

注意事项 #

• 这种方式适合简单逻辑，如果需要处理复杂的业务逻辑（比如调用服务、复杂数据处理），还是建议写在TypeScript方法里，避免模板过于臃肿、难以维护。
• 模板中的表达式支持大部分JavaScript语法，但要注意避免在模板中写过于复杂的代码，保持代码的可读性。

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