Angular19中@ng-select懒加载下拉框点击后立即开闭问题

问题现象 #

• 鼠标点击下拉框，弹出面板后立刻自动关闭
• 按住鼠标左键时下拉面板保持打开，松开按键后立即关闭
• 下拉框获得焦点后按回车键打开，面板能正常保持展开状态

相关代码 #

<ng-select
  [ngModel]="selectedChannel"
  [items]="allDataBuffer"
  [virtualScroll]="true"
  [loading]="loading"
  (change)="onChannelChange($event)"
  placeholder="Kanal auswählen"
  appendTo="body"
  (scroll)="onScroll($event)"
  (scrollToEnd)="onScrollToEnd()">

  <ng-template ng-option-tmp let-item="item">
    <div> {{ item.label }}</div>
  </ng-template>
</ng-select>

问题演示 #

解决方案 #

1. 升级ng-select至兼容版本 #

Angular 19属于较新版本，而@ng-select/ng-select@14.2.4是旧版本，二者存在兼容性冲突（尤其是事件处理、DOM挂载逻辑与Angular变更检测机制不匹配）。优先升级到支持Angular 19的版本（建议v17及以上，可参考官方文档确认最新兼容版本）：

npm install @ng-select/ng-select@latest

升级后需检查虚拟滚动、懒加载相关API是否有变更，调整代码适配新API。

2. 临时移除appendTo="body"属性 #

若暂时无法升级，可尝试移除appendTo="body"配置，让下拉面板挂载在组件内部DOM中，避免跨层级的事件冒泡冲突：

<ng-select
  [ngModel]="selectedChannel"
  [items]="allDataBuffer"
  [virtualScroll]="true"
  [loading]="loading"
  (change)="onChannelChange($event)"
  placeholder="选择通道"
  (scroll)="onScroll($event)"
  (scrollToEnd)="onScrollToEnd()">

  <ng-template ng-option-tmp let-item="item">
    <div> {{ item.label }}</div>
  </ng-template>
</ng-select>

3. 手动控制面板展开状态 #

通过[(open)]绑定手动管理展开状态，同时拦截点击事件防止意外关闭：

• 组件类中添加状态变量：

isOpen = false;

• 修改模板代码：

<ng-select
  [ngModel]="selectedChannel"
  [items]="allDataBuffer"
  [virtualScroll]="true"
  [loading]="loading"
  (change)="onChannelChange($event)"
  placeholder="选择通道"
  appendTo="body"
  (scroll)="onScroll($event)"
  (scrollToEnd)="onScrollToEnd()"
  [(open)]="isOpen"
  (click)="isOpen = !isOpen; $event.stopPropagation()">

  <ng-template ng-option-tmp let-item="item">
    <div> {{ item.label }}</div>
  </ng-template>
</ng-select>

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