javascript - 我怎么知道异步操作是否挂起？模板中的异步管道

Question

我想显示一条正确的消息，无论是加载还是没有项目。现在我使用以下模板。

但是我怎么知道异步操作是否仍然挂起？所以我可以显示单独的加载消息而不显示任何项目？

<div *ngIf="items$ | async as items; else noItems">
  There are {{ items.length }} items
  <div *ngFor="let item of items">
    {{ item.name }}
  </div>
</div>
<ng-template #noItems>
  Unfortunately there are no items OR they are still loading
</ng-template>

Answer 1

有一个开放的feature request在 Github 上，因为初始 null 无法与 Observable 中的实际 null 值区分开来。

作为一种解决方法:如果空数组还没有传达意义，您可以使用 [] 而不是 null 来表示“没有项目”。为此，要么更改后端响应(如果是请求)，要么重新映射 Observable 的值。

items$ = items$.pipe(map(v => v === null ? [] : v))

我创建了一个 stackblitz说明我的想法:

<ng-template let-items [ngTemplateOutletContext]="{ $implicit: items$ | async }" [ngTemplateOutlet]="t" #t>
  <span *ngFor="let item of items">{{item}}</span>
  <span *ngIf="items === null">items is loading for 3 seconds</span>
  <span *ngIf="items?.length === 0">items resolved empty</span>
</ng-template>

类(class):

// This is what you get from your service
this.items$ = of(null).pipe(delay(3000));

// Map null to empty array
this.items$ = this.items$.pipe(map(v => v === null ? [] : v))