angular 当列表项 added/removed 时，虚拟滚动不会重新呈现列表

Question

它目前是我项目的一部分。如果单击列表项，则会切换该项目的可见性。很多列表似乎使用角度的虚拟滚动渲染得很好，但是当列表中的大量项目被删除时就会出现问题。虚拟卷轴不刷新，中间留下freespace。每当添加项目或 deleted.The 我使用的列表数据不是可观察数据时，都需要刷新视口。请告诉我如何解决这个问题。

https://stackblitz.com/edit/angular-ivy-o9dhar?file=src%2Flist%2Flist.component.html

我的问题

Answer 1

您必须更新源代码才能使其正常工作。切换的问题是您需要用类似高度的东西替换它。他们在 angular cdk 的实验中确实有一段时间的动态高度。但是要删除，您可以像这样做一些简单的事情。关键部分只是更新源，以便它可以重新呈现列表

export class ListComponent {
  @Input()
  ListData: any[];
  remove(element) {
    this.ListData = this.ListData.filter((x) => x != element);
  }
}

项

export class ListItemComponent {
  @Input()
  element;

  @Output('remove')
  onListItemClicked = new EventEmitter();

  toggleVisibility() {
    this.onListItemClicked.emit(this.element);
  }
}

list.component.html

<cdk-virtual-scroll-viewport class="list-container" itemSize="30">
  <div *cdkVirtualFor="let data of ListData">
    <list-item [element]="data" (remove)="remove($event)"></list-item>
  </div>
</cdk-virtual-scroll-viewport>

https://stackblitz.com/edit/angular-ivy-tntnpm?file=src%2Flist%2Flist.component.ts

来自评论： Appending you still set a new object here is a simple way based on your stackblitz link.

const newItem = {
     id: Number(this.input.nativeElement.value) + 1,
     title: `item ${Number(this.input.nativeElement.value) + 1}`,
     isShow: true,
};
this.favoriteList = [newItem,...this.favoriteList] // instead of splice

angular 当列表项 added/removed 时，虚拟滚动不会重新呈现列表

angular virtual scroll doesn't re-render the list when list item added/removed

javascript

rxjs

typescript

reactjs

angular