Подсветка трубы не исчезает после очистки текста поиска

Question

Я использую этот пример кода (https://stackblitz.com/edit/angular-nue8pb-fwqdsc?file=app%2Fautocomplete-overview-example.ts), который я нашел для создания канала для подсветки искомого текста в матовом автозаполнении. Подсвеченная часть работает нормально, но как только я очищаю поиск, выделение по-прежнему остается в раскрывающемся списке. Это не ожидаемое поведение. Я хочу, чтобы выделение исчезло после очистки поиска. Пожалуйста, помогите мне исправить это.

https://stackblitz.com/edit/angular-nue8pb-fwqdsc?file=app%2Fautocomplete-overview-example.ts

Answer 1

Вы можете просто изменить свой конструктор, я думаю, что следующий код поможет вам

 constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => this.filterStates(state))
      );
  }

  filterStates(name: string) {
    this.toHighlight = name;
    return this.states.filter(state =>
      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

Демо

Answer 2

Сделай это-

.html file

<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl" (keyup)="onStateKeyup()">

.ts file

onStateKeyup() {
    this.toHighlight = this.stateCtrl.value;
}