服务器数据加载后的Angular 4 fire功能

Question

如何触发需要后端数据的功能？ 我的目标是使用Angular 4 getCars()依赖于getCities()和getCars() getPersons() 。

export class Person {
  constructor(
    public cities: any[],
    public cars: any[]
  ) { }
}

在组件中，我称：

  public ngOnInit(): void {
    this.getCars();
    this.getCities();
    this.getPersons();
  }

编辑服务：

  public getCars(): Observable<CarsList> {
    return this.http.get(this.carsUrl)
      .map((res: Response) => res.json())
      .catch((error: Response) => Observable.throw(
        this.errorHandlerService.showError(getCarsError)));
  }

零件：

 public getPersons(): void {
    this.personsService.getPersons()
        .subscribe(
          (data) => {
            this.persons = data;
            this.persons .forEach((person, index) => {
              person.carName = this.cars.find((car) => car.id === person.carId).name;
              console.log('error here because this.cars is still undefined')
            }
        )
 }

问题在于，在getCities()和getCars()以及数据依赖它之前会触发getPersons() 。 因此this.cities或this.cars对象为null，导致应用崩溃。 加载getCities()和getCars()时如何触发getPersons() ？ 已经使用setTimeout解决方法尝试了AfterViewInit ，但该方法不起作用。

Answer 1

通过这种方式解决：服务：

 public async getCars(): Promise<DetailedObjectsList> {
    try {
      const response = await this.http.get(this.carsUrl).toPromise();
      return response.json();
    } catch (e) {
      this.errorHandlerService.showError(carsError);
    }
  }

零件：

  public async getCars() {
    await this.carsService.getCars()
      .then((data) => {
        if (!isNullOrUndefined(data)) {
          this.cars = data.detailedObjects;
        }
      });
  }

最重要的是：

 public ngOnInit(): void {
     this.getCars()
      .then(() => {
        this.getCities()
          .then(() => {
            this.getPersons();
        });
      });
  }

希望对您也有帮助。