正如标题所说，我想拥抱 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. Use async我的模板中的管道
Make data可观察数组
仍然为用户显示加载信息
我是干净代码的忠实粉丝，那么如何使用 rxjs 和 Angular 2 很好地完成此任务呢？
我就是这样做的。我也用$在变量名的 和 处提醒我它是一个流。
// 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);
});
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
