使用異步管道和整個塊的可觀察性

Question

我有一個Observable，它從API返回一個大對象。我需要在我的模板中顯示這些值。

對於其他的數據作爲數組返回，我可以使用：

<div *ngFor="let value of values | async"> 
    <p>{{ value.prop }}</p> 
</div> 

我不需要等待異步到*ngFor內完成，因爲它已經在父元素得到了一個異步管。

與我的對象，我正在尋找類似的東西。此刻，我正在做類似於：

<h2>{{ (obj | async)?.title }}</h2> 
<p>{{ (obj | async)?.prop.prop2 }}</p> 
<p>{{ (obj | async)?.another.prop }}</p> 

這顯然會留下很多重複的代碼。有這樣的事情存在嗎？

<div *using="obj | async"> 
    <!-- obj has resolved, can access obj.prop --> 
</div> 

Answer 1

您可以創建這樣一個別名：

<div *ngIf="(obj$ | async) as obj"> 
    <h2>{{ obj?.title }}</h2> 
    <p>{{ obj?.prop.prop2 }}</p> 
    <p>{{ obj?.another.prop }}</p> 
</div> 

Answer 2

使用 '爲' 語法。

另外請注意，每個異步管道創建一個新的訂閱，如果您訂閱使用http - 它表示多個http調用。如果要在模板中使用異步管道多次使用相同的可觀察值，請使用Rx share（）。

 @Component({ 
     selector: 'my-app', 
     template: ` 
     <div> 
      <div *ngIf="obj$ | async as obj; else empty"> 
     {{obj.x}} 
     {{obj.y}} 
     </div> 
     <ng-template #empty>Empty. Wait 5 s...</ng-template> 
     </div> 
     `, 
    }) 
    export class App { 
     s = new Subject(); 
     obj$; 
     constructor() { 
     this.obj$ = this.s.asObservable(); 
     setTimeout(() => { 
      this.s.next({x:12, y:100}); 
     }, 5000) 
     } 
    }