Показать сообщение, если у Observable нет элементов после загрузки

Question

В приложении Angular 7 у меня есть следующее:

<div *ngIf="(posts$ | async)?.length > 0; else loader">
  <ng-container *ngFor="let post of posts$ | async">
    posts contents
  </ng-container>
</div>
<ng-template #loader>
  Loading ...
</ng-template>

Иногда после загрузки нет сообщений ...

В этом случае я хотел бы показать сообщение «Посты не найдены».

Как я могу это сделать?

Answer 1

Вы можете сделать это так:

<div *ngIf="(posts$ | async) as posts; else loader">
  <div *ngIf="posts.length > 0; else noposts">
    <ng-container *ngFor="let post of posts">
      posts contents
    </ng-container>
  </div>
  <ng-template #noposts>
    No posts
  </ng-template>
</div>
<ng-template #loader>
  Loading ...
</ng-template>