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调用非常快，将产生可怕的效果，如闪烁的框架。这个想法是：“如果通话时间超过500毫秒，请将 loading 设置为true”。

是否有任何优雅的解决方案可用于可观察对象？还是我完全走错路了？

（我正在使用Angular 9应用程序）

谢谢！

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>

免责声明：可能会有一个更为优雅的解决方案，但是我现在没有看到它。我将其归咎于时间太晚了，并且已经有了复活节的心情

可观察到的RxJ可以管理骨骼

1 个答案: