Angular cdk滚动:更新视图中未显示的数据源

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <cdk-virtual-scroll-viewport *cdkVirtualFor="let item of items">
    <div class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>

import { Component } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 1000 }).map((_, i) => `Item #${i}`);

  // 更新数据源的方法
  updateItems() {
    // 例如，添加新项
    this.items.push(`Item #${this.items.length}`);
    // 或者替换整个数组
    // this.items = [...this.items, `Item #${this.items.length}`];
  }
}

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 1000 }).map((_, i) => `Item #${i}`);

  constructor(private cdr: ChangeDetectorRef) {}

  updateItems() {
    this.items.push(`Item #${this.items.length}`);
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items; trackBy: trackByFn" class="example-item">
    {{item}}
  </div>
</cdk-virtual-scroll-viewport>

trackByFn(index: number, item: any): number {
  return index; // 或者返回唯一标识符
}

import { Component, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items: any[] = [];

  constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.http.get<any[]>('your-api-url').subscribe(data => {
      this.items = data;
      this.cdr.detectChanges(); // 确保视图更新
    });
  }
}