等待forkjoin渲染html

Question

我有2個呼叫的forkjoin 。 在html ，我需要等到forkjoin的響應到達。 有什么辦法可以使用async管道嗎？ 我在另一篇文章中讀到， async僅適用於observables和promises 。 我嘗試使用*ngIf來執行此*ngIf ，但是它不起作用。 提前致謝

TS

var1: string;
var2: string;

 forkJoin(
   this.call1(),
   this.call2()
 ).subscribe(([res1, res2]) => {
   this.var1 = res1;
   this.var2 = res2;
   }, err => console.log(err));

HTML

<div class="col">
   <label class="labelEsp">Var 1:</label>
   <span class="spanEsp uppercase" >{{ var1 }}</span>
</div>
<div class="col">
    <label class="labelEsp"> Var 2:</label>
    <span class="spanEsp" >{{ var2 }}</span>
</div>

Answer 1

您可以繼續在typescript使用訂閱，並使用標志在視圖中隱藏和顯示HTML。

這樣的事情會做：

dataReady = false;
forkJoin(
   this.call1(),
   this.call2()
 ).subscribe(([res1, res2]) => {
   this.var1 = res1;
   this.var2 = res2;
   },
 (err) => console.log(err),
 () => {
    this.dataReady = true
    // complete block
  }
);

<ng-container *ngIf="dataReady else loading">
  <div class="col">
    <label class="labelEsp">Var 1:</label>
    <span class="spanEsp uppercase" >{{ var1 }}</span>
  </div>
  <div class="col">
      <label class="labelEsp"> Var 2:</label>
      <span class="spanEsp" >{{ var2] }}</span>
  </div>
</ng-container>

<ng-template #loading>
  loading...
</ng-template>

如果要使用async管道本身來執行此操作，則可以執行以下操作：

data = forkJoin(
   this.call1(),
   this.call2()
 )


<ng-container *ngIf="data | async as resolvedData else loading">
  <div class="col">
    <label class="labelEsp">Var 1:</label>
    <span class="spanEsp uppercase" >{{ resolvedData[0] }}</span>
  </div>
  <div class="col">
      <label class="labelEsp"> Var 2:</label>
      <span class="spanEsp" >{{ resolvedData[1] }}</span>
  </div>
</ng-container>

<ng-template #loading>
  loading...
</ng-template>

在此處查看示例： https : //stackblitz.com/edit/angular-uwpwya?file=src%2Fapp%2Fapp.component.html