Ng Select v9.0.1中scrollToEnd事件仅触发一次问题求助

问题分析 #

在ng-select虚拟滚动模式下，scrollToEnd事件仅触发一次，无法实现多次触底加载，通常和数据更新方式、虚拟滚动高度计算或变更检测逻辑异常有关。

解决方案 #

1. 优化数据更新逻辑，避免重复赋值

你当前在循环中多次重新赋值usersList，频繁的变更检测会干扰ng-select的虚拟滚动判断逻辑。建议批量构建新数据后一次性更新数组：

test(e) {
  console.log('Event', e);
  console.log(this.usersList);
  
  // 批量生成新条目，减少变更检测次数
  const newItems = [];
  const baseId = this.usersList.length + 1;
  for (let index = 0; index < 30; index++) {
    newItems.push({
      id: baseId + index,
      name: `New item ${index}`
    });
  }
  
  // 一次性合并新旧数组
  this.usersList = [...this.usersList, ...newItems];
}

2. 强制触发变更检测

如果数据更新后ng-select未同步更新虚拟滚动状态，可通过ChangeDetectorRef强制触发变更检测：

先在组件中注入依赖：

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

@Component({
  // 组件元数据
})
export class YourComponent {
  usersList = [];
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  test(e) {
    // ... 批量生成新条目的逻辑
    
    this.usersList = [...this.usersList, ...newItems];
    // 强制触发变更检测，确保ng-select更新虚拟滚动状态
    this.cdr.detectChanges();
  }
}

3. 明确设置虚拟滚动的itemHeight

虚拟滚动依赖准确的条目高度计算总滚动范围，未设置itemHeight可能导致ng-select错误判断滚动位置。根据列表项实际高度配置该属性：

<ng-select 
  (scrollToEnd)="test($event)" 
  [virtualScroll]="true" 
  [itemHeight]="35" <!-- 根据实际列表项高度调整 -->
  [items]="usersList" 
  bindLabel="name" 
  bindValue="id"
></ng-select>

4. 检查滚动容器样式

确认ng-select的滚动容器没有被异常样式影响（比如固定高度、overflow属性错误设置），虚拟滚动需要正确的容器尺寸才能正常触发scrollToEnd事件。

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