Question

当用户在“输入”字段中键入内容时，会进行API调用以提取并填充数据列表中的数据以进行自动补全（提前输入）。

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

创建一个FullScreenGalleryVC而不是使用Subject。

html：

FormControl.valueChanges

ts：

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

需要其他逻辑来防止控制键（例如ArrowUp，ArrowDown等）发生事件。

即使从数据列表中选择选项，也会触发反应式窗体的valueChanges事件

1 个答案: