Angular中ng-select默认全选报错，如何使用compareWith？

错误原因 #

你设置了bindValue="folderId"，意味着selectedItem应该是字符串数组（因为开启了multiple="true"），但你直接把整个对象数组categoryFolders赋值给它，类型不匹配，导致报错。

方案一：修正selectedItem的赋值（推荐，适配你的场景） #

不需要额外添加compareWith，直接在TypeScript中将selectedItem赋值为所有folderId组成的数组即可：

// 在组件初始化钩子（如ngOnInit）中执行
this.selectedItem = this.categoryFolders.map(item => item.folderId);

HTML部分保持原有代码不变，因为bindValue已绑定folderId，字符串数组可直接与选项匹配。

方案二：使用compareWith（仅当需要绑定整个对象时） #

如果后续业务需要让selectedItem存储完整的对象数组，才需要添加compareWith。操作如下：

1. 在HTML的ng-select标签上新增[compareWith]属性：

<ng-select [items]="categoryFolders"
           [multiple]="true"
           bindLabel="folderId"
           bindValue="folderId"
           placeholder="Filter..."
           [closeOnSelect]=false
           [(ngModel)]="selectedItem"
           (ngModelChange)="changedSelectedItems(selectedItem)"
           [compareWith]="compareFn"> <!-- 新增该行 -->
</ng-select>

2. 在TypeScript中定义比较函数：

compareFn(a: any, b: any): boolean {
  return a.folderId === b.folderId;
}

3. 此时可直接将对象数组赋值给selectedItem：

this.selectedItem = [...this.categoryFolders]; // 用扩展运算符避免引用关联问题

注意：你的场景中选项仅含一个字符串字段作为ID和值，方案一更简洁高效，无需使用compareWith。

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