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上有一个开放的feature request，因为初始null无法与null的实际Observable值区分开来。

作为一种解决方法：如果空数组尚未传达含义，则可以使用[]而不是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))

我如何知道异步操作是否未决？模板中的异步管道

1 个答案: