Angular Material <mat-select> - 执行模糊功能

Question

我有一个<mat-select>元素，我想在元素模糊时执行一个函数。

目前该函数在选择更改时执行：

<mat-form-field fxFlex>
  <mat-label>SSR Status</mat-label>
  <mat-select [formControl]="ssrStatuses" multiple (selectionChange)="filtersUpdated()" [(value)]="selectedSsrStatuses">
    <mat-option *ngFor="let ssrStatus of ssrStatusList" [value]="ssrStatus.id">{{ssrStatus.label}}</mat-option>
  </mat-select>
</mat-form-field>

我在角度材质垫选择文档中看不到任何关于模糊或焦点的提及。这些关于Angular 4 的文档(blur)="myMethod()"提到了但这对我的<mat-select>. 如何在模糊时执行函数<mat-select>？

Answer 1

如果仍然有效，请尝试使用closed事件：

<mat-select (closed)="someMethod()">
  <mat-option></mat-option>
</mat-select>

Answer 2

许多原生DOM 事件都可以与 Angular 一起使用。事实上，您应该在 Angular 4 文档中找到测试模糊事件，因为它有效

// some html    
<h4>Basic native select</h4>
    <mat-form-field>
      <mat-label>Cars</mat-label>
      <select (blur)="blurred()" matNativeControl required>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </mat-form-field>

基本模糊方法：

// some component.ts
blurred() {
    console.log('blurred !')
  }

奖励，stackblitz 示例：