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>

在有角度的材料垫选择文档中看不到任何关于模糊或聚焦的提及。角度4上的These docs提及了(blur)="myMethod()"，但这对我的<mat-select>无效。如何在模糊<mat-select>上执行功能？

Answer 1

许多原生DOM events都可以与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 !')
  }

Bonus, stackblitz example：

Answer 2

如果仍然是实际的，请尝试使用closed事件：

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

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

2 个答案: