在模板中使用带有异步管道的Observable时显示加载

Question

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

<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.一切正常!但每当我进入模板时,都会出现空白无数据.然后所有的数据跳出来!非常友好的UX.所以我想使用某种预加载策略.但由于这里没有TS逻辑.使用异步管道在模板级别控制所有内容.在这种情况下如何添加加载？

Answer 1

也许有点晚了，但如果其他人想知道如何管理这个......使用模板怎么样？

例如，您可以使用以下内容：

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

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

所以你的 ion-card-content 将被隐藏，显示 #template，直到异步管道被加载。

Answer 2

你可以这样做:

<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>