Ionic3中virtualScroll排序后列表未刷新如何解决？

这个问题我之前也碰到过，核心原因是Ionic的VirtualScroll对数组的变化检测依赖于数组引用的改变，而不是数组内部元素的顺序调整。你在构造函数里排序时，数组是首次赋值，引用是新的，所以VirtualScroll能正常初始化；但点击按钮用sort()原地修改数组时，数组的引用没变化，VirtualScroll就没察觉到需要重新渲染列表。

下面给你几个有效的解决办法：

1. 创建新数组引用（推荐） #

不要直接原地修改原数组，而是先复制数组再排序，然后把新数组赋值给原变量。这样数组的引用发生了变化，Angular的变化检测会自动触发，VirtualScroll也会刷新列表。

示例代码：

// 假设你的排序按钮点击事件是这样的
sortByNameAsc() {
  // 用扩展运算符复制原数组，再排序后赋值
  this.items = [...this.items].sort((a, b) => {
    return a.name.localeCompare(b.name);
  });
}

sortByNameDesc() {
  this.items = [...this.items].sort((a, b) => {
    return b.name.localeCompare(a.name);
  });
}

2. 手动触发变化检测 #

如果你因为某些原因必须原地修改数组，可以通过ChangeDetectorRef手动通知Angular检测变化，强制VirtualScroll刷新。

步骤：

• 首先在组件中注入ChangeDetectorRef：

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

constructor(private cdRef: ChangeDetectorRef) {}

• 然后在排序完成后调用detectChanges()：

sortByNameAsc() {
  this.items.sort((a, b) => a.name.localeCompare(b.name));
  // 手动触发变化检测
  this.cdRef.detectChanges();
}

3. 配合virtualTrackBy优化（可选） #

虽然你觉得数组已经变化，但加上virtualTrackBy可以让VirtualScroll更高效地识别每个列表项，避免不必要的DOM操作，同时也能辅助解决刷新问题。

在模板中添加：

<ion-list [virtualScroll]="items" [virtualTrackBy]="trackByItemId">
  <!-- 你的列表项模板 -->
</ion-list>

然后在组件中定义trackByItemId方法：

trackByItemId(index: number, item: any): number {
  // 返回每个item的唯一标识，比如id
  return item.id;
}

这样结合前面的数组引用修改，就能确保排序后列表及时刷新了。

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