Angular虚拟滚动在添加/删除列表项时不重新渲染列表

这个问题可以通过触发Angular的变更检测器来解决。在添加/删除列表项后， 调用 ChangeDetectorRef 的 detectChanges() 方法可以强制Angular重新渲染组件。 以下是一个示例组件，该组件使用虚拟滚动来显示一个无限滚动列表，并在用户点击按钮时添加（或删除）新的元素。注意 detectChanges() 的 调用 方式：

import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'app-infinite-scroll',
  template: `
    <div style="height: 500px; overflow-y: scroll;">
      <cdk-virtual-scroll-viewport itemSize="50">
        <div *cdkVirtualFor="let item of items">{{ item }}</div>
      </cdk-virtual-scroll-viewport>
    <button (click)="add()">Add item</button>
    <button (click)="remove()">Remove item</button>
export class InfiniteScrollComponent {
  items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
  constructor(private cdr: ChangeDetectorRef) {}
  add() {
    this.items.push(`Item #${this.items.length}`);
    this.cdr.detectChanges();
  remove() {
    this.items.pop();
    this.cdr.detectChanges();
在上面的代码中，InfiniteScrollComponent包含一个无限滚动列表，其中数据存储在items数组中。当用户点击“添加”按钮时，add()方法向列表中添加一个新元素，并调用ChangeDetectorRef的detectChanges()方法来刷新组件。同样，当用户点击“删除”按钮时，remove()方法会从列表中删除最后一个元素，并调用detectChanges()方法。这将强制Angular重新渲染组件，使我们能够看到新添加/删除的列表项。