如何从模板到.ts 共享一个 let 值（在 *ngFor 内）

Question

I would like to take the work of pipe async to share the interpolation value {{ticketType.name}} with the.ts component to work with this value. Is it in fact possible?

Here the template code:

<mat-option *ngFor="let ticketType of ticketTypesQuery.list$ | async" [value]="ticketType.id">
       {{ticketType.name}}
</mat-option>

Answer 1

The question isn't exactly clear at the moment, but you could always pipe in any RxJS operator to the source observable in the component controller (*.ts) to use it's notifications.

For eg. if you only wish to use the value emitted from the observable without modifying it, you could use the tap operator. Try the following

Controller (*.ts)

import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

export SomeComponent implements OnInit {
  list$: Observable<any>;

  constructor() { }

  ngOnInit() {
    this.list$ = this.ticketTypesQuery.list$.pipe(
      tap(ticketTypes => {
        // use `ticketTypes` array emission from the observable
      })
    );
  }
}

Template (*.html)

You could also wrap the async pipe in <ng-container> to reuse it's emissions without another async . Note that each async pipe will trigger an individual subscription of a cold observable.

<!-- Note: we're using `list$` defined in the controller, not `ticketTypesQuery.list$` -->

<ng-container *ngIf="(list$ | async) as list">
  <mat-option *ngFor="let ticketType of list" [value]="ticketType.id">
    {{ticketType.name}}
  </mat-option>
</ng-container>