В Angular onSelectionChange не вызывается для углового mat-option

Question

У меня есть поле mat-form-field, которое содержит входные данные и mat-autocomplete, которое содержит параметр mat.Вход имеет событие (blur), в то время как параметр mat имеет событие (onSelectionChange).

Проблема, с которой я столкнулся, заключается в том, что при выборе элемента размытие вызывается до события onSelectionChange параметра mat.Метод для события размытия очищает входные данные в случае, если значение не существует в раскрывающемся списке.В случае, если я удаляю (размытие) событие ввода, вызывается (onSelectionChange).Мне нужно, чтобы это вызывалось до (размытия) события.

После некоторых исследований я обнаружил, что могу использовать .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, в этом случае код 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;
    }
...
}

Answer 2

Вы должны использовать (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 - Как получить доступ к выбранной опции?