typescript - Angular 2 - 在 (observableData | async) 尚未解析时显示加载信息

Question

正如标题所说，我想拥抱 rxjs Observables 的力量。

我现在做什么:

// dataview.html
<div *ngIf="isLoading">Loading data...div>
<ul *ngIf="!isLoading">
    <li *ngFor="let d of data">{{ d.value }}</li>
</ul>


// dataview.ts

data: any[] = [];
isLoading: boolean = false;

getData() {

this.isLoading = true;
this._api.getData().subscribe(
        data => {
            this.data = data;
            this.isLoading = false;
        },
        error => {
            this.error = error;
            this.isLoading = false;
        });
}

我想做的事情:

<强>1。在我的模板中使用 async 管道

1. 将data设为Observable数组

2. 仍然为用户显示加载信息

我是干净代码的忠实拥护者，那么如何使用 rxjs 和 Angular 2 很好地完成这件事呢？

Answer 1

我就是这样做的。此外，我在变量名的和处使用 $ 来提醒我这是一个流。

// dataview.html
<div *ngIf="isLoading$ | async">Loading data...</div>
<ul *ngIf="!(isLoading$ | async)">
    <li *ngFor="let d of data">{{ d.value }}</li>
</ul>


// dataview.ts

data: any[] = [];
isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);

getData() {

this.isLoading$.next(true);

this._api.getData().subscribe(
        data => {
            this.data = data;
        },
        error => {
            this.error = error;
        },
        complete => {
            this.isLoading$.next(false);
        });
}