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

你可以这样做：

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

Answer 2

也许有点晚了，但万一有人想知道如何解决这个问题... 那使用模板呢？

例如，您可以使用类似的内容：

<ion-card-content *ngIf='(course | async); else loading'>
  <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>

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

所以您的离子卡内容将被隐藏，显示#template，直到加载了异步管道为止。

Answer 3

让我们说我们有一个可观察的餐费。我们需要在可观察对象得到解析（即获取数据）时显示加载程序。下面是解决方法。

<div *ngIf="meal$ | async as meal; else loading;" >
   //use the meal variable to show some data
</div>
<ng-template #loading>
   //Show your loader here
</ng-template>

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

3 个答案: