Question

我需要创建一个Angular组件，以允许用户选择具有类型建议的城市。

当用户键入三个或更多字符时，前端会要求后端提供名称以用户输入开头的城市列表。

此后，我将城市列表的可观察值传递给mat-option组件

searchCities = (value: string): Observable<City[]> => {
    if(value.length >= this.minCityNameLength){
      return this.detailsITService.fetchCitiesByName(value);
    }

    return of([]);
};

如果方法searchCities（作为输入参数传递给我的自定义组件）被新的用户输入调用，是否可以“取消”请求？

Answer 1

Typeahead是一个非常普遍的问题，而rxjs是一个处理此问题的Wonderul工具。假设input$是可观察到的，它发出用户输入的搜索字符串，您可以这样做：

input$.pipe(
  // This is optional, just a suggestion. It prevents a
  // request from being started while the user is still
  // quickly typing a word. The value is a time in ms, see
  // the operators docs for details.
  debounceTime(250),

  // Here's the actual piece of code: switchMap will
  // start a new inner subscription whenever a new search
  // input comes along, cancelling any still on-going previous
  // request. This avoids any race conditions.
  switchMap(input => input.length > this.minCityNameLength
    ? this.detailsITService.fetchCitiesByName(input)
    : of([])
  )
).subscribe(…);

例如，设置input$流的方式将是

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

其中input$被定义为

public input$ = new Subject<string>();

您可以找到一个有效的示例here。如果您打开控制台并在有和没有操作员的情况下尝试使用，也可以看到debounceTime在其中的效果。

如果创建了新的后端请求，请取消之前的后端请求

1 个答案: