使用Angular 6获取选定的数据列表选项

Question

我正在尝试使用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;
      }
    });

我认为datalist元素上的事件支持有限，例如选项元素上没有单击事件，数据列表元素上没有更改事件。我一直看到的唯一方法是在输入元素上使用（输入）处理程序之类的东西来在值更改时触发。但是，当我尝试此操作时，无论用户何时开始输入值以及在选择数据列表项时（但仅当输入失去焦点时），它都将触发-这对我来说似乎是多余的，因为我正在使用反应式表单来监视输入更改。

有没有人有使用Angular从头开始编写这样的组件并处理过可以指导我的数据列表选项的经验？

谢谢