在 Angular 中，不会为 Angular mat-option 调用 onSelectionChange

Question

我有一个包含输入的 mat-form-field 和一个包含 mat-option 的 mat-autocomplete。输入具有 (blur) 事件，而 mat-option 具有 (onSelectionChange) 事件。

我遇到的问题是，当我选择一个项目时，会在 mat-option 的 onSelectionChange 事件之前调用模糊。如果下拉列表中不存在该值，则模糊事件的方法会清空输入。如果我删除输入的 (blur) 事件，则会调用 (onSelectionChange)。我需要在 (blur) 事件之前调用它。

经过一些研究，我发现我可以在 (blur) 的函数中使用 .setTimeOut，它允许在 (onSelectionChange) 的函数之后调用其主体，但是，通过此修复，远离输入的注意力会延迟如果输入的值错误，则清空输入。

这是我的 html 代码：

<mat-form-field [style.width.%]="fieldWidthPercentage">
    <input matInput #tagsInput (blur)="checkIfMatch()">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let item of filteredAutoCompleteItems | async" 
      (onSelectionChange)="selected(item)" [value]="item">
      {{ item.name }}
    </mat-option>
    </mat-autocomplete>
</mat-form-field>

这是（模糊）事件的函数：

checkIfMatch() {
    setTimeout(() => {
    // . . .
    }, 1000);
  }
}

Answer 1

您应该在<mat-autocomplete> 上使用(optionSelected)。

<input matInput #tagsInput (blur)="checkIfMatch()">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event.option.value)">
  <mat-option *ngFor="let item of filteredAutoCompleteItems | async" 
    [value]="item">
    {{ item.name }}
  </mat-option>
</mat-autocomplete>

文档：https://material.angular.io/components/autocomplete/api#MatAutocompleteSelectedEvent

示例：Mat-autocomplete - How to access selected option?

Answer 2

我找到了我的问题的解决方案： 对于 blur 的调用，我添加了一个检查以查看事件的相关目标是否来自 mat-option，在这种情况下，不会调用 checkIfMatch 的代码：

checkIfMatch(event) {

    if (event.relatedTarget && event.relatedTarget.id.indexOf('mat-option') > -1) {
      // In case of a direct selection, there is no need to check if it matches.
      event.preventDefault();
      return;
    }
...
}