RxJs Observable可用于管理骨骼

Question

我有一个列表，其中包含由rest调用加载的数据，以及在rest调用期间显示的骨架：

<div *ngIf="!loading; else skeleton">
<span *ngFor="let item of items">{{item}}</span>
</div>
<ng-template #skeleton>
<my-skeleton></my-skeleton>
</ng-template>

目标是：只在给定的超时后显示这个骨架，因为如果REST调用非常快，就会产生可怕的效果，就像骨架的闪光一样。其想法是："好吧，如果调用时间超过500ms，请将加载设置为true"。

有什么优雅的解决方案可以用可观测性来做到这一点吗？或者我完全走错了路？

(我正在使用Angular 9应用程序(

Thx！

Answer 1

使用concat、merge、mapTo和timer的组合，我想您可以得到您想要的：

readonly restCall$ = this.http.get().pipe(
shareReplay({ refCount: true, bufferSize: 1 })
);
readonly loading$ = concat(
race(
this.restCall$.pipe(
mapTo(false)
),
timer(500).pipe(
mapTo(true)
)
),
this.restCall.pipe(
mapTo(false)
)
);

您将模板更改为：

<div *ngIf="!(loading$ | async); else skeleton">
<span *ngFor="let item of items">{{item}}</span>
</div>
<ng-template #skeleton>
<my-skeleton></my-skeleton>
</ng-template>

免责声明：可能有一个更优雅的解决方案，但我现在还没有看到。我把它归咎于今天晚了，而且已经处于复活节的情绪