Question

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

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

经过一些研究，我发现我可以在（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

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

<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

我找到了解决问题的方法：对于模糊调用，我添加了一个检查以查看事件的相关目标是否来自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;
    }
...
}

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

2 个答案: