angular - Angular：如何根据元素大小用物品填充容器，然后在容器装满后停止？

Question

我正在写一个无限滚动（不能使用现成的，因为我展示的东西有时会嵌套在一个对象中。

目前，用足够的元素填充容器效果很好，我知道它会滚动，但这需要猜测并且不可扩展。

我尝试使用我编写的相同代码来检测滚动大小并在显示数组的底部添加更多元素（在滚动上效果很好），但它只是填充所有内容而不是停止。我认为这是因为它没有在添加到显示数组的算法迭代之间重绘？有没有办法强制重绘，所以它会知道元素有多大？或者这在计算上是否会令人望而却步？

一些组件（现在是扁平的；对象嵌套稍后出现）：

  ngAfterViewInit(){
    this.initted = true;
    this.fillWithItems();
  }

  fillWithItems(){
    if(this.initted){
      while(this.icons.length && this.needMore(this.iconContainerRef.nativeElement)){
        this.displayIcons.push(...this.icons.splice(0,5));
      }
    }
  }

  onScroll(event: Event){
    let scrollement = event.target as HTMLElement;
    if(this.needMore(scrollement)) this.fillWithItems()
  }
  needMore(el){
    return el.scrollHeight - el.scrollTop < 2 * el.clientHeight
  }

标签： angularinfinite-scroll