angular - Använd async pipe och observable för hela blocket

Jag har en Observable som returnerar ett stort objekt från ett API. Jag behöver visa dessa värden i min mall.

För andra data som returneras som en array kan jag använda:

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

Jag behöver inte vänta på att asynkroniteten ska slutföras inom *ngFor, eftersom den redan har en asincron pipe i föräldraelementet.

Med mitt objekt letar jag efter något liknande. För närvarande gör jag något liknande:

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

Detta lämnar uppenbarligen mycket duplicerad kod. Finns något liknande detta?

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

Svar #1

Använd syntaxen 'as'.

Var också medveten om att varje async-pipe skapar en ny prenumeration och om din prenumeration använder http - betyder det flera http-anrop. Använd Rx share() om du vill använda samma observable flera gånger i mallen med async-pipe.

     @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)
      }
    }

Svar #2

Du kan skapa ett alias på detta sätt:

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