Angular 表单控件最后可观察到的变化答案

【问题标题】：Angular form control last observable changeAngular 表单控件最后可观察到的变化
【发布时间】：2018-06-02 13:46:47
【问题描述】：

我正在构建一个自动完成功能，该功能正在查询后端以获取建议，并且希望仅在用户输入 Angular 5 表单控件时获得特定延迟的最后一个查询。目前我的代码看起来像

 this.newVendorForm.get('address').valueChanges.pipe(delay(3000)).subscribe(
  address => {
    this.geocodeApi.getAddressSuggestions(address)
      .subscribe(
        response => {
          console.log('address suggestions');
          console.log(response);
          this.addressSuggestions = response;
        },
        error => {
          console.log('error getting address suggestion');
          console.log(error);
        }
      )
  }
);

这可行，但是它会在 3000 毫秒后对每个输入的字母进行查询。例如，'test' 将在 3000 毫秒后查询 ['t', 'te', 'tes', 'test']。如何在 3000 毫秒延迟后从 valueChanges 中获取最后一个更改（即“测试”），然后进行订阅？谢谢你的帮助

【问题讨论】：

标签： angular typescript autocomplete rxjs angular-observable

【解决方案1】：

您想要的是debounceTime 和switchMap 的混合体。

this.newVendorForm.get('address').valueChanges.pipe(
  debounceTime(3000),
  switchMap(address => this.geocodeApi.getAddressSuggestions(address).pipe(
    catchError(err => {
      console.error(err);
      return of();
    })
  )),
  filter(Boolean),
).subscribe(response => this.addressSuggestions = response);

debounceTime 使得如果在 3 秒内有两个 valueChanges 发射，则只使用最后一个。这与 delay 不同，后者将在所有更改发生 3 秒后发出所有更改。
switchMap 接受一个内部 observable（例如 http 请求）并将 observable 流更改为它——即您现在订阅了 getAddressSuggestions observable 流。如果有东西发送到switchMap，它将取消之前的 observable。这样做的结果是，如果之前的 getAddressSuggestions 调用在新的调用开始之前尚未完成，则之前的调用将被取消。
catchError（.catch 的可出租运算符版本）用于 getAddressSuggestions observable，而不是 valueChanges。否则，如果 API 出现错误，则 valueChanges observable 将完成。使用 catchError 可以让您在不完成 valueChanges observable 的情况下处理错误。
filter 仅用于发出具有值的响应。如果出现错误，of() 将不会发出。不过，这只是处理这种情况的一种方法。

最后，您可能希望避免手动使用.subscribe，因为您必须使用.unsubscribe。相反，您可以尝试依赖模板中的 | async 管道，它将为您处理订阅。

【讨论】：