從API角度獲取JSON對象並將其存儲在變量中，檢查是否存在

Question

我正在研究Angular項目，我遇到了一個問題，我沒有解決這個問題......

//part of class Data
constructor(private fetchData: FetchData) {
  this.subscription = timer(0, 1000000).pipe(
        switchMap(() => this.fetchData.getData())
    ).subscribe((result) => this.data = result);
}

private data: any;
private subscription: Subscription;

public getData(): Object {
    return this.data.data_property;
}

它因運行時條件而報告錯誤，我想通過等待填充變量來解決此問題。 整個應用程序需要它，所以它非常重要。 我想用Angulars rxjs中的Observable來解決這個問題，但我並沒有真正開始工作，我對此非常陌生。 順便說一下，FetchData和Data Class都是@Injectable Services。

如果有人有一個額外的提示讓我將變量數據轉換為一種類型的接口，例如“myData”，我也會非常高興，因為我不想使用任何黑客。 問題是FetchData的getData只返回來自HttpClient的Object：

//part of class FetchData
getData() {
    return this.http.get(this.dataUrl)
    .pipe(
        catchError(this.handleError)
      );
}  

無論如何幫助坦克。 愛Stackoverflow社區：D

Answer 1

主要問題

1. 如果你需要在加載app之前加載一些數據，可以使用app_initializer Angular：如何正確實現APP_INITIALIZER
2. 也許在這個剪切了對類字段的引用中，應該使用this.data而不是類Data本身

public getData(): Object {
    return this.data.data_property;
}

響應類型
Http方法讓你提供一個泛型，比如this.http.get<CustomResponseInterface>()

Answer 2

其中一種方法可能如下 -

您的數據服務設置如下 -

  export class DataService {

  //This is
  private _data$: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  data$: Observable<any>;

  constructor(private fetchData: FetchData) {
    this.data$ = this._data$.pipe(filter(d => !!d));
    this.getData();
   }      

  getData() {

    timer(0, 1000000).pipe(
      switchMap(() => this.fetchData.getData()),
      tap(d => {
        this._data$.next(d);
      })
    ).subscribe();
  }
}

現在要使用DataService.data $在組件中執行以下操作[在此示例中我假設它是HomeComponent]您要使用獲取的數據[您可以在盡可能多的組件/服務中使用數據$ observable想要，它將從后端發出最后獲取的數據] -

export class HomeComponent implements OnInit {

  constructor(private dataService: DataService) { }

  data$: Observable<any>;

  ngOnInit() {
    this.data$ = this.dataService.data$;
  }    
}

在HomeComponent的html中

<div *ngIf="data$ | async as data">
  <!-- Render your 'data' -->
</div>