使用 RxJS 进行 Angular 异步延迟渲染

Question

我正在寻找在 Angular 中使用 RxJS 进行“延迟渲染”的方法，我想要实现的目标如下：

<div *ngFor="let item of items$ | async">
  {{item.text}}
<div>

在我的组件中：

export class ItemsComponent implements OnInit {
  public items$: Observable<Item[]>;
  
  constructor(private setStore: SetStore){}

  ngOnInit() {
     const setId = 1;
     this.items$ = this.setStore.sets$.pipe(map(sets => sets.find(set => set.id = 1).items));
  }
}

这工作正常，但当集合有 +50 个项目时，渲染需要时间并且冻结一秒或更长时间。我一直在寻找一种懒惰的方法，通过某种方式渲染前 30 个项目，然后在 500 毫秒后加载下一个 30 个项目，依此类推，直到列表到达末尾。

编辑： 我尝试过这种方法：

const _items$ = this.setStore.sets$.pipe(
  map(sets => sets.find(set => set.id == 1).items)
);
const loadedItems = [];
_items$.subscribe(data => {
  this.items$ = from(data).pipe(
    concatMap(item => {
        loadedItems.push(item);
        return of(loadedItems).pipe(delay(1));
      })
    );
  });
})

上面的方法在延迟渲染方面效果很好，但有一些缺点，例如：

• 最初您在页面中看不到任何项目
• 每 1ms 一件一件地加载项目，而不是批量加载

以上代码未经测试，如果需要我可以提供示例

Answer 1

据我了解，您缺少的是一个额外的buffer运算符

关于第一个项目符号（初始项目），您可以跳过前 30delay秒