Angular 如何避免错误中断值更改

在angular 6应用程序中，我遇到了一些rxjs运算符的问题。 我有一个搜索字段，当用户在字段中键入时，我需要调用我的服务（service do GET request），如果该服务没有任何错误（如500），则该服务将正常工作

但是一个错误为500的请求在值更改中打破了链，可能我没有从服务返回正确的值

这是组件中的搜索字段：

this.manufacturer.valueChanges
  .pipe(
    filter((value: string) => (value ? value.length > 2 : false)),
    tap(() => (this.loadingAutocomplete = true)),
    debounceTime(500),
    switchMap(val => this.frameService.getItems(val, "manufacturerAutocomplete")),
    tap(() => (this.loadingAutocomplete = false)),
    catchError(err =>
      return of([]))
  )
  .subscribe(
    manufacturers => {
      this.matchingManufacturers.next(manufacturers);
    },
    err => {
      this.loadingAutocomplete = false;
      this.matchingManufacturers.next([]);
    }
  );

这就是服务：

getItems(value: string, endPoint: string) {
  return this.http.get(
    this.endPointUrlService.cutLinks(this.endPointUrlService.map.get("frames")) + "/search/" + endPoint
  ).pipe(
    map((res: string[]) => {
      if (res) {
        return res;
      } else {
        return [];
      }
    })
  );
}

当用户第一次键入它可以工作的内容时，如果我有错误，则不会再次调用valueChanges。

---

我需要处理组件中的错误，而不是服务中的错误。

捕获前面的错误-在服务层中，如下所示：

 getItems(value: string, endPoint: string) {
        return this.http.get(this.endPointUrlService.cutLinks(this.endPointUrlService.map.get("frames")) + "/search/" + endPoint).pipe(
          map((res: string[]) => {
            if (res) {
              return res;
            } else {
              return [];
            }
          }),
          catchError(err => return of([]))
    );
  }

---

从valueChanges属性的rxjs语句中得到的可观察结果是已完成的，这就是它不再作出反应的原因

重要提示：可以观察到的错误将被完成，并且您无法改变该行为

您需要做的是防止来自端点服务的错误向下流入switchMap语句，并进一步流入链中。如果它流入链中，该链将完成。为了防止错误向下传播，当api调用抛出错误时，需要返回empty（）

getItems(value: string, endPoint: string) {
    return this.http.get(this.endPointUrlService.cutLinks(this.endPointUrlService.map.get("frames")) + "/search/" + endPoint).pipe(
      map((res: string[]) => {
        if (res) {
          return res;
        } else {
          return [];
        }
      }),
      catchError(err => {
          // report error to user
          console.log(err);
          // Important: stop observable from emitting anything
          return empty();
      })
    );
}

有关该主题的更多信息：

---

可能此方法解决了我的问题，这是组件，而服务无法捕获任何内容：

this.manufacturer.valueChanges
  .pipe(
    filter((value: string) => (value ? value.length > 0 : false)),
    tap(() => (this.loadingAutocomplete = true)),
    debounceTime(500),
    switchMap(val =>
      this.frameService.getItems(val, "manufacturerAutocomplete").pipe(
        catchError(err => {
          handleError(err);
          this.loadingAutocomplete = false;
          return [];
        })
      )
    ),
    tap(() => (this.loadingAutocomplete = false))
  )
  .subscribe(
    manufacturers => {
      this.matchingManufacturers.next(manufacturers);
    },
    err => {
      this.loadingAutocomplete = false;
      this.matchingManufacturers.next([]);
    }
  );

---

如果我返回

[]

，我需要捕获组件中的错误。我不知道这是否是错误，或者列表是否真的为空。因此，请以所需的方式处理此行为，但请更早。若您以前并没有捕捉到错误，那个么您会在

开关映射中得到它。干得好。我，因为发布由那些花时间帮助你的人启发的答案是拒绝接受这项服务。@magos你没有发布正确的代码，我说“我需要捕获组件中的错误”，你在服务中编写catchError。。。