角度模板语法将异步数组分配为多个变量

时间:2018-08-22 08:18:17

标签: angular typescript rxjs

在JS中,有一种优雅的方法可以将值从给定数组传递到新变量,如下所示:

let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3

我想知道是否可以使用Angular的HTML语法实现相同的优雅方式,

// TS
this.obs1$: Observable<ObsType1> = ...;
this.obs2$: Observable<ObsType2> = ...;
this.combined$ = combineLatest(this.obs1$, this.obs2$);

// HTML
<div *ngIf="combined$ | async as [valOfObs1, valOfObs2]">
    ...
</div>

可观察到的combined$是来自RxJS的combineLatest的结果,它应该向我返回一个数组值的数组。

1 个答案:

答案 0 :(得分:0)

显然,文档中没有任何内容暗示这是可能的。因此,我必须采取类似的解决方法:

this.obs1$: Observable<ObsType1> = ...;
this.obs2$: Observable<ObsType2> = ...;
this.combined$: Observable<{obs1: ObsType1, obs2:: ObsType2}>;

this.combined$ = combineLatest(this.obs1$, this.obs2$).pipe(
    map(([obs1, obs2]) => ({obs1, obs2});
);

// HTML
<div *ngIf="combined$ | async as combined">
    {{ combined.obs1.foo}}
    {{ combined.obs2.bar}}
</div>