角度形式控制最后可观察到的变化

Question

我正在构建一个自动完成功能，该功能正在查询后端以获取建议，并且只想获取用户在 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 中获取最后一次更改（即“测试”），然后进行订阅？谢谢你的帮助

Answer 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使得如果valueChanges3 秒内有两次发射，则仅使用最后一次。delay这与在更改完成 3 秒后发出所有更改不同。
• switchMap接受一个内部可观察数据，例如 http 请求，并将可观察数据流更改为它——即，您现在订阅了getAddressSuggestions可观察数据流。如果有东西发射到switchMap，它将取消之前的可观察值。这样做的结果是，如果getAddressSuggestions在新的调用开始之前先前的调用尚未完成，则前一个调用将被取消。
• catchError( 的可出租运算符版本).catch用于 observablegetAddressSuggestions而不是 valueChanges。否则，如果 API 出现错误，则 valueChanges observable 将完成。使用catchError它所在的位置可以让您在不完成 valueChanges 可观察的情况下处理错误。
• filter用于仅发出具有值的响应。如果出现错误，则of()不会发出。但这只是处理这种情况的一种方法。

最后，您可能希望避免使用手册，.subscribe因为您将不得不这样做.unsubscribe。相反，您可以尝试依赖| async模板中的管道来为您处理订阅。