如何在 Angular 中以一种方法订阅 httpRequest 和 observable

Question

我必须从数据库中获取位置数组，但我不想每次用户进入此组件时都这样做。所以我想首先调用方法从数据库中获取数组并保存。接下来当用户再次调用函数时使用保存的数组

我的服务：

    locations:Observable<Location[]>;
    isLocationsEmpty = true;
    
    getLocationList() {
    if(this.isLocationsEmpty) {
      this.isLocationsEmpty = false;
      return this.httpClient.get<Location[]>(`${this.apiURL}locations/`, {headers: this.getToken()})
    }
    else return this.locations;
  }

我的组件：

  ngOnInit(): void {
    this.apiService.getLocationList().subscribe(
      (data:Location[]) => {
        this.locations = data;
      },
      error => console.log(error)
    );
  }

我第二次调用时的错误：

core.js:6241 ERROR TypeError: Cannot read property 'subscribe' of undefined
    at CheckComponent.ngOnInit (check.component.ts:33)
    at callHook (core.js:4726)
    at callHooks (core.js:4690)
    at executeInitAndCheckHooks (core.js:4630)
    at refreshView (core.js:12026)
    at refreshEmbeddedViews (core.js:13404)
    at refreshView (core.js:12035)
    at refreshComponent (core.js:13458)
    at refreshChildComponents (core.js:11729)
    at refreshView (core.js:12064)

Answer 1

服务中

import { of, tap } from 'rxjs';

    locations:Location[] = [] ;
    
    getLocationList():Observable<Location[]>{ {
      if(!this.locations.length) {
        return this.httpClient.get<Location[]>(`${this.apiURL}locations/`, {headers: this.getToken()}).pipe(tap(locations:Location[] => this.locations = locations)
      }
      else return of(this.locations);
  }

在您的组件中，您可以使用您的代码。

解释：

其中，它允许我们 return 观察任何你想要的东西

Tap，它允许我们在return他们

之前操纵可观察的数据

https://rxjs-dev.firebaseapp.com/api/operators/tap

https://www.learnrxjs.io/learn-rxjs/operators/creation/of

Answer 2

在之前的答案的基础上，使用本地存储也是一个不错的功能

getCache<T = any>(key:string>:T{
  let cachedValue = this.transferState.get(stateKey, null);
  //check local storage and create state value from there
  if(cachedValue === null){
    cachedValue = localStorage.getItem(key)
    this.transferState.set(stateKey, cachedValue);
  }
  return cachedValue;
}

那就这样用吧

values = this.myService.getCache<Array<MyClass>>('myKey');

不需要订阅它，因为它不是可观察的

如何在 Angular 中以一种方法订阅 httpRequest 和 observable

How to subscribe httpRequest and observable in one method in Angular

database

observable

rxjs

angular