在模板中使用带有异步管道的 Observable 时显示加载 [英] Display loading while using Observable with Async pipe in template

问题描述

情况:我使用 FirebaseObjectObservable 来填充我的 Ionic 2 (rc0) 模板.模板代码:

Situation: I am using FirebaseObjectObservable to populate my Ionic 2 (rc0) template. Template code:

<ion-card-content>
  <p>{{(course | async)?.description}}</p>
  <br>
  <h2>Learning Objectives</h2>
  <ul>
    <li *ngFor = "let objective of (course | async)?.objectives">{{objective.text}}</li>
  </ul>
  <h2>Takeaway</h2>
  <ul>
    <li *ngFor = "let takeaway of (course | async)?.takeaways">{{takeaway.text}}</li>
  </ul>
</ion-card-content>

TS 代码:

this.course = this.af.database.object('/bbwLocations/courses/' + courseId); 

this.course 是一个 Firebase Object Observable.一切正常！但是每当我进入模板时，都会出现一闪而过的空无数据.然后所有的数据都跳出来了！非常不友好.所以我想使用某种预加载策略.但由于这里没有 TS 逻辑.一切都通过异步管道在模板级别进行控制.在这种情况下我将如何添加加载?

this.course is a Firebase Object Observable. Everything works! But whenever I come into the template, there is a flash of empty no data. Then all the data jump out! Very not UX friendly. So I want to use some kind of pre-loading strategy. But since there is not TS logic here. Everything is controlled in template level with async pipe. How would I add loading in this situation?

推荐答案

你可以这样做:

<style>
  pre {
   color: orange;
   // or whatever you want
  }
</style>
<ion-card-content>
  <p>{{(course | async)?.description}}</p>
  <br>
  <h2>Learning Objectives</h2>
  <pre *ngIf="!(course | async)">loading objectives...</pre>
  <ul>
    <li *ngFor = "let objective of (course | async)?.objectives">{{objective.text}}</li>
  </ul>
  <h2>Takeaway</h2>
  <pre *ngIf="!(course | async)">loading takeaways...</pre>
  <ul>
    <li *ngFor = "let takeaway of (course | async)?.takeaways">{{takeaway.text}}</li>
  </ul>
</ion-card-content>

这篇关于在模板中使用带有异步管道的 Observable 时显示加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！