在模板中将Observable与Async Pipe一起使用时显示加载

本文介绍了在模板中将Observable与Async Pipe一起使用时显示加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

情况:我正在使用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对象.一切正常！但是，每当我进入模板时，都会出现一闪一闪的空无数据的情况.然后所有数据跳出来！非常不适合UX.所以我想使用某种预加载策略.但是由于这里没有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>