Angular Material虚拟滚动：如何默认展示非首屏选中值？

要实现默认展示上次保存的选中值，且自动加载对应分页并滚动到选中项，核心要处理两个环节：加载选中项所在的分页数据，以及滚动到目标项并标记选中状态。以下是具体实现方案：

1. 初始化时加载选中项所在分页 #

首先需要确定选中项在总数据集中的位置，再加载对应分页的数据：

• 如果后端支持分页查询，可直接通过选中项的唯一标识（如ID）请求后端返回包含该选项的分页数据，同时获取该选项在当前分页的索引。
• 如果是前端维护数据分页，可根据选中项的全局索引计算目标页码：targetPage = Math.floor(targetIndex / pageSize)，再加载对应页码的数据。

示例代码：

import { Component } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html'
})
export class YourComponent {
  selectedItem: any; // 从本地存储/后端获取的上次选中项
  dataList: any[] = [];
  pageSize = 20;

  constructor(private dataService: YourDataService) {
    // 假设从本地存储读取上次选中项
    this.selectedItem = JSON.parse(localStorage.getItem('lastSelectedItem') || '{}');
    this.loadTargetPage();
  }

  loadTargetPage() {
    // 调用后端接口，传入选中项ID获取对应分页数据
    this.dataService.getPageByItemId(this.selectedItem.id).subscribe(res => {
      this.dataList = res.pageData;
      // 后续滚动到选中项的逻辑放在这里
      this.scrollToSelectedItem();
    });
  }
}

2. 自动滚动到选中项并标记状态 #

借助CdkVirtualScrollViewport的scrollToIndex()方法，在数据加载完成后滚动到目标索引，并通过CSS高亮选中项：

模板部分 #

<cdk-virtual-scroll-viewport #viewport itemSize="50" class="scroll-container">
  <div 
    *cdkVirtualFor="let item of dataList" 
    [class.selected-item]="item.id === selectedItem.id"
  >
    {{ item.label }}
  </div>
</cdk-virtual-scroll-viewport>

组件逻辑部分 #

import { ViewChild, AfterViewInit } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

export class YourComponent implements AfterViewInit {
  @ViewChild('viewport') viewport: CdkVirtualScrollViewport;

  ngAfterViewInit() {
    // 确保视图初始化后再执行滚动逻辑
    this.scrollToSelectedItem();
  }

  scrollToSelectedItem() {
    const targetIndex = this.dataList.findIndex(item => item.id === this.selectedItem.id);
    if (targetIndex !== -1) {
      // 滚动到目标索引，'smooth' 实现平滑滚动，也可传'auto'即时定位
      this.viewport.scrollToIndex(targetIndex, 'smooth');
      // 可选：强制触发变更检测，确保选中状态及时更新
      // this.cdr.detectChanges();
    }
  }
}

高亮样式 #

.scroll-container {
  height: 400px;
}

.selected-item {
  background-color: #f5f5f5;
  border-left: 4px solid #1976d2;
}

3. 处理跨分页的自动加载 #

如果选中项所在的分页未提前加载，scrollToIndex()会触发scrolledIndexChange事件，可在该事件中监听并加载对应分页的数据：

onScrolledIndexChange(index: number) {
  const targetPage = Math.floor(index / this.pageSize);
  // 加载目标分页数据，合并到现有dataList（根据你的分页逻辑调整，比如替换/追加）
  this.dataService.getPage(targetPage).subscribe(res => {
    this.dataList = [...this.dataList, ...res.pageData];
  });
}

替代临时方案的优势 #

你之前将选中项放到列表开头的方案会打乱原有数据顺序，且无法支持用户再次选择其他分页的项。上述方案可保持数据原有排序，同时准确定位并加载目标分页，完全符合业务需求。

内容的提问来源于stack exchange，提问作者A DEv