在Angular5中使用ng-select 1.4.1遇滚动条及AsyncPipe错误求助

我来帮你搞定这两个问题，核心问题出在对AsyncPipe的使用场景理解上，咱们一步步来：

先分析错误原因 #

你遇到的两个错误都是因为AsyncPipe只能处理Observable或Promise类型的数据，但你的listClient看起来是一个普通的同步数组（从错误日志里的[object Object]数组就能看出来），直接给它加| async管道就会触发无效参数的错误，第二个dispose的错误也是因为AsyncPipe试图去销毁一个不存在的异步订阅导致的。

解决方案分两种情况 #

情况1：listClient是同步数组（比如直接从变量赋值，不是接口请求返回的） #

这种情况完全不需要用AsyncPipe，直接去掉| async就行，修改后的HTML代码：

<ng-select *ngIf="_listClients" [items]="listClient" bindLabel="nom" bindValue="id" [(ngModel)]="selectedPersonId">
</ng-select>

这里的*ngIf="_listClients"已经确保数据存在，直接传入数组给[items]就可以正常渲染。

情况2：listClient是Observable/Promise（比如从HTTP接口获取的异步数据） #

如果你的数据确实是异步加载的，那要确保组件里的listClient是正确的Observable类型，比如组件代码应该是这样：

// 组件.ts文件
import { Observable } from 'rxjs';
import { YourClientService } from './your-client.service';

export class YourComponent {
  listClient: Observable<any[]>;
  selectedPersonId: number;

  constructor(private clientService: YourClientService) {}

  ngOnInit() {
    // 假设getClients()返回的是Observable<any[]>类型
    this.listClient = this.clientService.getClients();
  }
}

然后HTML里可以这样写，用async as语法同时完成数据订阅和存在性检查：

<ng-select *ngIf="listClient | async as clients" [items]="clients" bindLabel="nom" bindValue="id" [(ngModel)]="selectedPersonId">
</ng-select>

这样既避免了重复订阅，又确保只有数据加载完成后才渲染组件。

解决滚动条无法下拉的问题 #

当你修复了AsyncPipe的错误后，如果滚动条还是有问题，大概率是样式冲突或者容器高度设置的问题：

• 给ng-select的下拉面板设置最大高度，强制显示滚动条：

/* 在组件样式或全局样式里添加 */
ng-select .ng-dropdown-panel {
  max-height: 300px; /* 根据你的需求调整高度 */
  overflow-y: auto;
}

• 检查是否有其他全局CSS（比如自定义的滚动条样式、overflow:hidden等）影响了ng-select的下拉容器，排查并移除冲突样式。

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