asyc 管道未加载 ngif答案

【问题标题】：asyc pipe not loading with ngifasyc 管道未加载 ngif
【发布时间】：2020-05-23 18:42:02
【问题描述】：

我正在尝试使用带有 ngif 的异步管道实现 http post 操作的可观察捕获结果并显示结果。当我使用没有 ngif 的异步管道时，它工作正常。 - {{(result | async)} 但是对于 ngif 这不起作用。请在此处指出错误。

page.html 文件

<div  *ngIf="result | async as quiz; else loading">
        <ion-row>
          <ion-col><div class="small-text ion-text-capitalize ion-text-start" color="medium">
            qz ID:</div></ion-col>
          <ion-col><ion-text><i>{{quiz.quid}}</i> </ion-text></ion-col>
        </ion-row>
</div>

page.ts 文件

 private results: Observable<QuizDetail>;

doSearch(id:string) {
    let user = this.auth.getUser();
    console.log("searching: user: " + user.connection_key + " " + user.uid + "Quiz:" + id);
    //this.loading = true;
    this.results=this.quizDB.loadQuizDetail(user.connection_key, user.uid, id);
  }

服务类

loadQuizDetail(key:String,uid:String, quid:String):Observable<QuizDetail>{
    var parameters = {
      "connection_key":key,
      "uid":uid,
      "quid":quid
    };
    console.log("going to call post");
    return this.http.post<QuizDetail>(API_URL + '/quiz_detail',
                          JSON.stringify(parameters),httpOptions);
  }

【问题讨论】：

标签： asynchronous rxjs observable

【解决方案1】：

结果不是结果，改成results |异步

<div  *ngIf="results | async as quiz; else loading">
    <ion-row>
      <ion-col><div class="small-text ion-text-capitalize ion-text-start" color="medium">
        qz ID:</div></ion-col>
      <ion-col><ion-text><i>{{quiz.quid}}</i> </ion-text></ion-col>
    </ion-row>
</div>

【讨论】：