等待服务响应，然后继续进行？

Question

基本上我希望当一个组件被调用时，它应该等到服务返回数据。 我有一个组件，当它加载它调用一个服务。在服务中，我有一个具有 HTTP 调用的函数，然后它给出它调用服务另一个函数的响应，所以当我简单地执行该组件时，它给出的响应为时已晚。我想等到服务返回响应数据。

我尝试使用 setTimeout 和 promises，但仍然需要时间和功能才能提前执行。

设置超时

setTimeout(() => {
  if (this.persistenceService.get('base64') != '' || this.persistenceService.get('base64') != null || this.persistenceService.get('base64') != undefined) {
    this.selectedFileData = this.persistenceService.get('base64');
    this.SpinnerStart = false;
  } else {
    setTimeout(() => {
      this.selectedFileData = this.persistenceService.get('base64');
      this.SpinnerStart = false;
    }, 10000);
  }
}, 10000);

我想加载组件加载器，直到服务给出响应。 这里是服务代码：

   this.HttpClients.post(APIcall, Data, config).subscribe(
     async (response: any) => {
        if (response.status == 200) {
          this.json_data = response.data;

          this.invoice_pdf(this.json_data, types, '', types, this.Invoice_Number);
          // $template_id
        }
      },
      error => {
        console.log('Error', error);
      }
    );

}```

Answer 1

做这样的事情：

selectedFileData$: Observable<FileData>;

ngOnInit() {
  this.selectedFileData$ = this.persistenceService.get('base64'); // Observable!
}

<ng-container *ngIf="selectedFileData$ | async as selectedFileData; else spinner">
  // your business stuff
</ng-container>

<ng-template #spinner>
  // your spinner stuff
<ng-template>