如何在订阅运行时绘制不完整的组件？

Question

我有一个 "normal" 订阅来从 http 源获取数据，就像这样

sscmData.getRegistrations().subscribe(response => {
    this.registeredSkaters = response.map( item => item.skater )
})

数据最终呈现在htmltable中。因为数据量可能非常大，所以 table 显示需要时间。

现在我可以在创建 table 时显示 "loading circle" 或其他内容，但我正在寻找更智能的解决方案。

是否可以在数据仍为 "loaded by subscribe()" 时显示 "incomplete loaded" table 或列表？这样做有什么概念吗？

感谢您的帮助！

Answer 1

我可能是错的，但我真的不认为您可以获得不完整的数据来显示在 table 上。我什至想不出这怎么可能。

也就是说，解决这个问题的理想方法是不要从后端获取如此大量的数据。理想情况下，响应以页面的形式从服务器发送。所以实际的响应会有一个字段用于当前页码、当前页面大小，然后是对应于该页码和页面大小的记录。

如果这个后端是您可以控制的东西，我建议您在那里实现它。

这样一来，前端和后端的负载就会减少，通过网络传输的数据也会减少，从而加快应用程序加载速度并改善用户体验。

Answer 2

如果这幅画是 "slow" 你可能阻塞了 ui 线程。您应该在 table 级别实施它，大多数 table 确实有分页。如果你想延迟项目，使用延迟和扫描：

import { of, from, timer} from 'rxjs'; 
import { map, mergeMap, scan, delay } from 'rxjs/operators';

const arr = new Array(15)
  .fill(null)
  .map((_,i) => i);

const source = of(arr).pipe(
  mergeMap(x => from(x)),
  delay(50),
  scan((a: Array<number>,c: number) => [...a, c], [])
);

source.subscribe(x => console.log(x));

这将导致：

如何在订阅运行时绘制不完整的组件？

How to draw incomplete components while subscribe is running?

components

angular

rxjs6

如何在订阅 运行 时绘制不完整的组件？

How to draw incomplete components while subscribe is running?

components

angular

rxjs6

如何在订阅运行时绘制不完整的组件？