typescript - ไวยากรณ์เทมเพลต Angular กำหนด array แบบ async เป็นตัวแปรหลายตัว

ใน JS มีวิธีที่ง่ายและสวยงามในการส่งค่าจากอาเรย์ที่กำหนดไปยังตัวแปรใหม่ดังนี้:

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

ฉันสงสัยว่าฉันสามารถทำให้ได้วิธีที่สง่างามเหมือนกันโดยใช้ไวยากรณ์ HTML ของ Angular บ้างไหม แบบนี้:

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

Observable combined$ เป็นผลลัพธ์จาก combineLatest ของ RxJS ซึ่งควรจะส่งกลับมาเป็นอาเรย์ของค่าของอาเรย์

คำตอบ #1

ปรากฏว่า ไม่มีอะไรที่บ่งบอกในเอกสารว่าเรื่องนี้เป็นไปได้ ดังนั้น ฉันจึงต้องหาวิธีแก้ปัญหาแบบนี้:

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>