angular - 在模板中使用带有异步管道的 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 对象 Observable。一切正常!但是每当我进入模板时，就会出现空白无数据的闪光。然后所有的数据都跳出来了!非常不友好。所以我想使用某种预加载策略。但是由于这里没有 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，直到加载异步管道。