Как полностью сбросить ввод с помощью mat-autocomplete

Question

Здесь, в этом Stackblitz У меня есть автозаполнение мат с асинхронными данными.

Когда срабатывает (optionSelected) (когда я нажимаю на опцию), я хочу, чтобы поле было полностью сброшенокак его недавно обработанный / инициализированный.

В настоящее время у этого решения есть две проблемы !

1. после очистки Я не получаю каких-либо самовнушений.Я хочу снова получить полные автопредставления.

==> Мне нужно снова размыть и сфокусироваться или начать печатать.

когда я НЕ набираю и просто размытие и перефокусирую У меня все еще есть класс mat-option.mat-selected, присоединенный к панели, поскольку сброс влияет только навходное значение.Я выделил это с помощью background-color: red;.

Answer 1

Вам нужно сделать функцию сброса примерно такой, как показано ниже

resetAutoInput(optVal, trigger: MatAutocompleteTrigger, auto: MatAutoComplete) {
    setTimeout(_ => {
      auto.options.forEach((item) => {
        item.deselect()
      });
      this.myControl.reset('');
      trigger.openPanel();
      }, 100);
  }

и в вашем HTML-коде будет

<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" #trigger="matAutocompleteTrigger" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="resetAutoInput($event.option.value, trigger, auto);">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>