подождите, пока не вернется html - PullRequest
Новая
       14

подождите, пока не вернется html

0 голосов
/ 23 апреля 2019

У меня есть 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>

1 Ответ

1 голос
/ 23 апреля 2019

Вы можете продолжать использовать подписку в 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

...