Невозможно сбросить входное значение для компонента typeahead

Question

Для компонента typeahead кажется, что невозможно очистить введенное значение после появления списка результатов.Если список результатов не отображается, модель можно без проблем очистить с помощью кнопки.

Шаги для воспроизведения:

1. открыть https://stackblitz.com/edit/angular-rybwwn-w3w4ca
2. ввеститекст «aaa»
3. нажмите на кнопку «Очистить»
4. ввод очищен
5. введите текст «ala».Появится список результатов.
6. нажмите на кнопку «Очистить»
7. вход не очищен

есть ли другой способ очистить введенное значение?

Answer 1

Fix 1: Используйте setTimeout

clear(){
   setTimeout(()=>{
       this.model = '';
     });
  }

Fix 2: Используйте Native elmenent

Вы можете использовать ElementRef и ViewChild, чтобы получить ссылку для search input и очиститьтекстовое значение по нативной ссылке.

Ваша модифицированная версия вашего clear метода - -

import {Component, ElementRef, ViewChild} from '@angular/core';

clear(){
    this.model = '';
    console.log(this.searchInput.nativeElement);
    setTimeout(()=>{
       this.searchInput.nativeElement.value = "";
    }) 
  }

рабочая копия здесь - https://stackblitz.com/edit/angular-rybwwn-hxpcyv