如何使用角度的异步管道检查 *ngIf 内的长度？

Question

How to check length inside *ngIf with async pipe?

I try to do this way, but its not working. what is the correct way to do it?

<mat-menu #favoriteMenu="matMenu">
  <ng-container *ngIf="items$ | async as items && items.length; else empty">
    <button mat-menu-item *ngFor="let item of items">
      ...
    </button>
  </ng-container>
  <ng-template #empty>no favorite here</ng-template>
</mat-menu>

Answer 1

I think the best solution still is, to split this up into 2 containers. That is not pretty, but AFAIK the only solution to do what you want to achieve while avoiding duplicate subscriptions to the Observable .

<ng-container *ngIf="items$ | async as items; else empty">
  <ng-container *ngIf="items?.length > 0; else empty">
     ...
  </ng-container>
</ng-container>
<ng-template #empty>no favorite here</ng-template>

Answer 2

With a slight modification to the observable you can achieve this.

For example:

items$: Observable<number[] | undefined> = of([1, 2, 3, 4]).pipe(map((items) => {
    if(items?.length > 0) {
      return items;
    }
    return undefined;
  }));

Here you need to use the pipe and map function additionally. Then in the template file:

<ng-container *ngIf="(items$ | async); else empty; let items">
  <button mat-menu-item *ngFor="let item of items">
      {{item}}
  </button>
</ng-container>
<ng-template #empty>no favorite here</ng-template>

Using this way only one subscription is created also it fallbacks to empty template if the array is empty. Hope this would help you. You can find the stackblitz link here .

Answer 3

Why container? True. In this case, there is not much difference. ( https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ )

<ng-template *ngIf="(items$ | async).length > 0">
   <button mat-menu-item *ngFor="let item of items$ | async">
      {{ item }}
   </button>
</ng-template>