Question

我正在使用Angular 6应用程序，我想在该存储中将常用但很少更改的对象数组存储在localStorage中。我有一个服务类，用于从Web服务检索这些数组。服务中的函数返回可观察的值。我想检查localStorage以查看阵列是否已经存在。如果不是，那么我想从Web服务获取数组，并将localStorage项设置为返回值。如果已经存在，则返回存储的内容。我正在努力从该条件的所有可能分支中返回可观察值。似乎有人已经做过，但是我找不到任何示例...

这是我现有的用于返回以下数组之一的函数：

getApprovalRoutes(): Observable < ApprovalRoute[] > {
  if (!localStorage.getItem("allRoutes")) {
    this.http.get < ApprovalRoute[] > (`${this.baseUrl}/Routes`).subscribe(ar => {
      localStorage.setItem("allRoutes", JSON.stringify(ar));
      return Observable.from(ar);
    });
  } else {
    return Observable.from(JSON.parse(localStorage.getItem("allRoutes")));
  }
}

运行此命令时，出现以下错误：

无法读取未定义的属性“ subscribe”

感谢您的帮助！

Answer 1

this.http.get < ApprovalRoute[] > (`${this.baseUrl}/Routes`).subscribe(ar => {
  localStorage.setItem("allRoutes", JSON.stringify(ar));
  return Observable.from(ar);
});

以上内容未返回可观察到的结果。您无法将订阅者中的值返回给函数的调用者。

return Observable.from(JSON.parse(localStorage.getItem("allRoutes")));

上面的方法使用from()将值数组转换为单独发出的值。这与发出数组的返回类型Observable<ApprovalRoute[]>不匹配。

根据我在您的示例中看到的内容。我想也许这就是您想要的。

getApprovalRoutes(): Observable<ApprovalRoute[]> {
    return of(localStorage.getItem('allRoutes'))
        .pipe(
            switchMap(routes => {
                if (!routes) {
                    return this.http.get<ApprovalRoute[]>(`${this.baseUrl}/Routes`)
                        .pipe(tap(ar => localStorage.setItem('allRoutes', JSON.stringify(ar))));
                }
                return of(JSON.parse(routes));
            })
        );
}

您要从localStorage发出值，如果该值为空，则切换到HTTP请求。标签进入HTTP结果并将其存储。

如果localStorage item为null，则设置item，否则返回Observable吗？

1 个答案: