Angular 订阅dataservice中保存的可观察数据

我有一个ionic 4应用程序可以从端点检索故障。我想将数据保存在服务的属性中

因此，我可以在多个屏幕上访问列表，这也意味着每次加载第一个屏幕时，我不必重新加载列表

我的错误服务在下面。我调用

updateaults

，检索故障并将其存储在

this.faults

中

export class FaultsService {

  private selectedFault: Fault;
  public faults: Fault[];

    constructor(private http: HttpClient) {}

   updateFaults() {
       this.http.get<Fault[]>('/api/faults').subscribe((data: any) =>
       {
         this.faults = data.data
       })
    }

    getFaultObservable() : Observable<Fault[]>
    {
      return of(this.faults)
    }

}

---

但是当我加载页面时，虽然没有错误。不显示任何内容，也不激发console.log。因此，我不确定我的订阅是否正确。

这可能是一种更好的方式，因此您不必调用update。您可以只缓存第一次，然后每隔一次返回缓存。我添加了一个无效缓存，以防您有时需要这样做

export class FaultsService {

  private selectedFault: Fault;
  private faults: Fault[];

    constructor(private http: HttpClient) {}

    getFaultObservable() : Observable<Fault[]>
    {
      if(this.faults) {
          return of(this.faults)
      }


      return this.http.get<Fault[]>('/api/faults').pipe(
   tap(data => this.faults = data.data)
      )
    }

    invalidateCache() {
       this.faults = null;
    }

}

导出类故障服务{
私有选择故障：故障；
私人过失：过失[]；
构造函数（私有http:HttpClient）{}
getFaultObservable（）：可观察
{
如果（这是故障）{
返回（此故障）
}
返回此.http.get（'/api/faults'）.pipe(
点击（数据=>this.faults=data.data）
)
}
使失效（）{
this.faults=null；
}
}

该服务可以缓存检索到的项目，然后将这些项目返回到任何后续调用中，这些调用使用可观察的方式包装。服务本身可以使用缓存调用的结果

您应该保持缓存从调用方抽象出来，因此保持retrieval为1方法。然后调用方调用

getFaults（）

，并订阅返回的可观察对象。就来电者而言，这是第一次还是第十次并不重要

import { map, tap } from 'rxjs/operators';
import { of } from 'rxjs';

export class FaultsService {

  faults: Fault[];

  constructor(private http: HttpClient) {}

  getFaults() : Observable<Fault[]> {
    return this.faults
        ? of(this.faults)
        : this.http.get<{data: Fault[]}>('/api/faults')
              .pipe(tap((data) => this.faults = data.data) // cache
                  , map((data) => data.data)); // return just Fault[] from data.data to the subscriber
    }
}

从'rxjs/operators'导入{map，tap}；
从'rxjs'导入{of}；
导出类故障服务{
故障：故障[]；
构造函数（私有http:HttpClient）{}
getFaults（）：可观察{
把这个还给我
（这是故障）
：this.http.get（“/api/faults”）
.pipe（点击（（数据）=>this.faults=data.data）//缓存
，map（（data）=>data.data））；//从data.data向订阅服务器返回just Fault[]
}
}

故障

在服务中是

未定义的

。您是否在任何时候调用

updateaults

？您是否尝试在您的http订阅中添加console.log（）。对不起，应该这么说。我在页面的ngOnInit上调用它。当我尝试此操作时，this.faults与model data.data一起返回。我尝试将抽头更改为this.faults=data.data，但它仍将其报告为this.faults。data@JaChNo-

this.http.get（'/api/faults'）.pipe（点击（（数据）=>this.faults=data.data））

。一旦更改了实现，请确保正在使用新的构建（ng serve或ng build--watch）。此外，还需要在http get调用上更改泛型参数。@JaChNo-我又添加了一个修复程序，以确保原始订阅也返回

Fault[]

，而不是

{data:Fault[]}

.Winner！就这样。非常感谢。第一次编辑仍然返回错误。data@JaChNo很乐意帮忙！

import { map, tap } from 'rxjs/operators';
import { of } from 'rxjs';

export class FaultsService {

  faults: Fault[];

  constructor(private http: HttpClient) {}

  getFaults() : Observable<Fault[]> {
    return this.faults
        ? of(this.faults)
        : this.http.get<{data: Fault[]}>('/api/faults')
              .pipe(tap((data) => this.faults = data.data) // cache
                  , map((data) => data.data)); // return just Fault[] from data.data to the subscriber
    }
}