等待 forkjoin 渲染 html答案

【问题标题】：wait forkjoin to render html等待 forkjoin 渲染 html
【发布时间】：2019-09-12 10:02:21
【问题描述】：

我有一个forkjoin，有 2 个电话。在html 中，我需要等到forkjoin 的响应到达。 async 管道有什么办法吗？我在另一篇文章中读到async 仅适用于observables 和promises。我试图用*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>

【问题讨论】：

你最初在*ngIf 上放了什么
最初我把*ngIf="var1 | async; else loading"和模板<ng-template #loading>Loading Data...</ng-template> ，但它总是显示加载数据
如果您已经返回 observable，则不需要 async 管道

标签： html angular typescript fork-join

【解决方案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

【讨论】：

它工作正常！最后我 sed 异步方法。谢谢！