Angular下拉选如何点击选项即触发函数，无论ngModel值是否变化？

现有代码问题梳理 #

• <option>上绑定(change)事件无效，原生option元素不支持change事件，该事件仅能绑定到父级select元素才会触发
• [selected]="privacy"绑定逻辑错误，[selected]需要接收布尔值来判断是否选中，正确写法为[selected]="privacy.id === model.cv_enum"
• ngModelChange确实仅在双向绑定的值发生变更时触发，所以重复选择相同值时不会触发该事件

实现重复点击相同选项也触发函数的方案 #

方案1：基于原生select实现（无需引入第三方组件） #

思路是监听select的点击事件，主动获取当前选中项触发逻辑，无需依赖值变更：

模板代码修改

<select 
  [(ngModel)]="model.cv_enum" 
  (click)="handleSelectClick($event)"
  class="form-control-sm" 
  id="cv-enum" 
  name="cv-enum"
>
  <option 
    *ngFor="let privacy of privacyActivity.privacyActivity"
    [ngValue]="privacy.id"
    [selected]="privacy.id === model.cv_enum"
  >
    {{ privacy.description}}
  </option>
</select>

组件代码新增逻辑

handleSelectClick(event: MouseEvent) {
  const selectDom = event.target as HTMLSelectElement;
  // 过滤下拉框展开的点击，仅在有有效选中项时触发
  if (selectDom.selectedIndex < 0) return;
  const selectedId = Number(selectDom.value);
  // 调用业务函数
  this.addPrivacy({enum: selectedId, model: this.model});
}

方案2：使用Angular Material MatSelect（开发更便捷） #

如果项目已接入Angular Material，直接绑定mat-option的click事件即可，无论选中值是否变化都会触发：

<mat-select [(ngModel)]="model.cv_enum" class="form-control-sm">
  <mat-option 
    *ngFor="let privacy of privacyActivity.privacyActivity" 
    [value]="privacy.id"
    (click)="addPrivacy({enum: privacy.id, model: model})"
  >
    {{privacy.description}}
  </mat-option>
</mat-select>

补充说明 #

你现有addPrivacy函数中打开弹窗后直接return的逻辑是正常的，如果需要选择相同值时也弹出对应配置窗，上述两种方案都可以满足需求。

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