我怎么知道异步操作是否正在待处理?模板中的异步管

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

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>

类：

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