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

在 Angular CDK 中使用滚动虚拟化（例如 cdk-virtual-scroll-viewport）时，您可能会遇到需要更新视图中未显示的数据源的情况。以下是一些步骤和示例，帮助您在使用 Angular CDK 的虚拟滚动时更新数据源。

1. 确保正确设置虚拟滚动

首先，确保您已经正确设置了虚拟滚动。以下是一个基本的设置示例：

<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>

2. 更新数据源

当您需要更新数据源时，您可以直接修改数据源数组，并确保 Angular 的变更检测能够检测到这些变化。以下是一个示例组件：

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}`];
  }
}

3. 使用 `ChangeDetectorRef`

如果您发现更新数据源后视图没有更新，您可以手动触发变更检测。您可以通过注入 ChangeDetectorRef 来实现这一点：

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();
  }
}

4. 使用 `trackBy` 函数

在使用 *cdkVirtualFor 时，您可以使用 trackBy 函数来优化性能并确保正确更新视图。trackBy 函数可以帮助 Angular 跟踪每个项目的身份，从而减少不必要的 DOM 操作。

<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; // 或者返回唯一标识符
}

5. 处理异步数据

如果您的数据源是异步获取的（例如从 API），确保在数据加载完成后更新数据源，并在更新后调用 detectChanges()。

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(); // 确保视图更新
    });
  }
}