Получение выбранного варианта списка данных с Angular 6 - PullRequest
Новая
       9

Получение выбранного варианта списка данных с Angular 6

0 голосов
/ 11 сентября 2018

Я пытаюсь создать собственный ввод автозаполнения, используя элемент списка данных HTML5, чтобы при вводе пользователем текста в основной ввод, связанный с списком данных, найденные совпадения, содержащие введенный текст, отображались в списке данных.

У меня это работает, однако я сталкиваюсь с проблемой, когда я не могу определить, когда пользователь выбрал один из параметров в списке данных для установки значения ввода. 

<input type="text" placeholder="Search..." [formControl]="serviceNumberInput" list="services-list"/>
<datalist id="services-list">
    <option *ngFor="let service of matchedServices">{{service.name}}</option>
</datalist>

Используя подход реактивных форм Angular, я наблюдаю за изменениями входных значений и выполняю выборку с сервера для сопоставления результатов для заполнения параметров списка данных: 

this.serviceNumberInput.valueChanges.pipe(
      debounceTime(300)
    ).subscribe((searchText: string) => {
      if (searchText.length > 0) {
        this.serviceDetailsService.getServices(`service.name contains ${searchText}`).subscribe((response: Array<IServiceDetails>) => {
          this.matchedServices = response;
        });
      } else {
        console.log('clear!!');
        this.selectedService = undefined;
      }
    });

Я полагаю, что существует ограниченная поддержка событий для элемента данных, например, нет события щелчка на элементах параметров или события изменения для элемента списка данных. Единственные подходы, которые я продолжаю видеть, - это использовать что-то вроде обработчика (input) для элемента input для запуска при изменении значения. Но когда я попробовал это, он будет срабатывать как всякий раз, когда пользователь начинает вводить значение, так и при выборе элемента списка данных (но только тогда, когда ввод теряет фокус) - это мне кажется излишним для использования, так как я использую реактивные формы уже следить за изменениями ввода.

Кто-нибудь имел опыт кодирования такого компонента с нуля с помощью Angular и имел дело с выбором вариантов списка данных, которыми они могут руководствоваться?

Спасибо

...