在继续使用 Angular 之前等待方法完成答案

【问题标题】：Await for method to complete before moving on in Angular在继续使用 Angular 之前等待方法完成
【发布时间】：2018-06-25 18:50:51
【问题描述】：

我有一个问题，我需要知道如何在继续之前等待方法完成。

我在组件中通过 http get 调用：

private minTimestamp: Date;
private maxTimestamp: Date;

ngOnInit(): void {
 this.getTimestamps();
 const filters: EventFilters = this.getFilters();
 this.dtOptions = this.eventsService.GetEvents(filters);
}

private getFilters(): EventFilters {
    console.log(this.selectedStartDate);
    console.log(this.selectedStartTime);
    return { FromTimestamp: new Date(`${this.selectedStartDate} ${this.selectedStartTime}`).toISOString(), ToTimestamp: new Date(`${this.selectedEndDate} ${this.selectedEndTime}`).toISOString()};
}

private getTimestamps() {
    this.eventsService.GetMinMaxTimestamp()
      .subscribe(
        result => {
          this.srcChannels = result;
          console.log('Src channels loaded');
        },
        error => {
          console.error(error);
          this.toastr.error('Fetching source channels filter failed');
        }
      );
  }

在役：

public GetMinMaxTimestamp(): Observable<TimestampBoundaries> {
    return this.http.get<TimestampBoundaries>(`${this.endpointsBaseUrl}GetMinMaxTimestamp`);
}

现在的问题是 GetEvents 使用这些日期，而 getTimestamps 稍后完成，然后 get 事件被触发并且值未定义。有什么办法吗？

【问题讨论】：

为什么 getEvents 需要 getTimestamps 并不明显。 GetEvents 需要过滤器而不是时间戳。请分享更多代码。但这似乎是一个常见的switchMap 案例
尝试像async asyncMethod() { const data1$ = await this.method1(); const data2$ = await this.method2(); }这样使用async和await这样它会逐行调用来获取数据。假设 method1() 和 method2() 将返回 observables

标签： angular angular6

【解决方案1】：

不确定为什么需要时间戳来获取事件，因为根据您的代码，您需要获取事件的过滤器而不是时间戳。但是，如果您需要在获得时间戳后调用它，这就是解决方案。

解决方案是在 getTimeStamps 完成后调用 getEvents，而不是调用 onInit。

private minTimestamp: Date;
private maxTimestamp: Date;

ngOnInit(): void {
 this.getTimestamps();
}

private getFilters(): EventFilters {
    console.log(this.selectedStartDate);
    console.log(this.selectedStartTime);
    return { FromTimestamp: new Date(`${this.selectedStartDate} ${this.selectedStartTime}`).toISOString(), ToTimestamp: new Date(`${this.selectedEndDate} ${this.selectedEndTime}`).toISOString()};
}

private getTimestamps() {
    this.eventsService.GetMinMaxTimestamp()
      .subscribe(
        result => {
          this.srcChannels = result;
          console.log('Src channels loaded');
          const filters: EventFilters = this.getFilters();
          this.dtOptions = this.eventsService.GetEvents(filters);
        },
        error => {
          console.error(error);
          this.toastr.error('Fetching source channels filter failed');
        }
      );
  }

所以基本上，你得到你的过滤器并在你得到你的时间戳之后调用 getEvents

让我知道这是否适合你。

【讨论】：

好吧，这在短期内会起作用，但是如果我添加额外的过滤器来调用不同的 api 方法。
您的过滤器不是来自任何服务电话。所以基本上如果你在 getTimeStamps onInit 之前调用它，你仍然会拥有它们。这里的主要目标是在根据您的问题获取时间戳后调用 getEvents。如果你想要过滤器 onInit，只需在 getTimeStamps 之前调用 getFilters。