我如何知道异步操作是否处于挂起状态？模板中的异步管道答案

【问题标题】：How do I know if async operation is pending? async pipe in template我如何知道异步操作是否处于挂起状态？模板中的异步管道
【发布时间】：2018-04-23 19:13:43
【问题描述】：

我想显示一个正确的消息，要么加载要么没有项目。现在我使用以下模板。

但是我怎么知道异步操作是否仍在等待中？所以我可以显示单独的加载消息并且没有项目？

<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>

【问题讨论】：

在这种情况下，我认为直接订阅items$ 比使用异步管道更有意义。需要用吗？

标签： javascript angular

【解决方案1】：

Github 上有一个开放的feature request，因为无法将初始的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>

类：

// 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))

【讨论】：