从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>