Событие valueChanges Реактивной формы срабатывает даже при выборе параметров из списка данных

Question

Когда пользователь вводит в поле ввода вызов API, чтобы выбрать и заполнить данные в списке данных для автозаполнения (typeahead).

control.get('city').valueChanges.pipe(
  map((searchText) => searchText.trim().toLowerCase()),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(searchText => this.locationService.getCitiesList(searchText))
).subscribe(response => {
    this.dataListOption = response.cities.map(city => city.name);
})

Приведенный выше код работает нормально и получает параметры, заполненные, как и ожидалось, но когда я выбираю один из заполненных параметров в раскрывающемся списке, снова появляется триггер события valueChange, который снова выполняет другой вызов API.

Как это предотвратить?Есть ли для этого оператор RXJS?Я не хочу использовать ng-select или любые другие пакеты.

Answer 1

создать Subject вместо использования FormControl.valueChanges.

html:

<input type="text" (keyup)="keyup($event.target.value)">

ts:

subject = new Subject()

constructor() {
  this.subject.pipe(
    map((searchText) => searchText.trim().toLowerCase()),
    filter(text => text.length > 2),
    debounceTime(10),
    distinctUntilChanged(),
    switchMap(searchText => this.locationService.getCitiesList(searchText))
  ).subscribe(response => {
    this.dataListOption = response.cities.map(city => city.name);
  });
}

keyup(text) {
  this.subject.next(text)
}

Дополнительная логика, необходимая для предотвращения событияуправляющий ключ, такой как ArrowUp, ArrowDown и т. д.