Angular Ng Multiselect：选中下拉项时设置对应布尔值的问题

错误原因分析 #

你之前的onItemSelect代码逻辑存在错误：

• this.dropdownList是选项数组，并非单个选项对象，无法直接访问idField属性
• idField是配置中定义的字段名称（对应选项的item_id），不是选项对象的属性

正确的做法是直接使用onItemSelect方法传入的item参数——它就是当前被选中的单个选项对象，直接读取其item_id即可判断。

完整解决方案 #

1. 先在组件类中定义需要修改的布尔变量

export class AppComponent {
  option1boolean = false;
  option2boolean = false;
  dropdownList: any[] = [];
  dropdownSettings: any = {};

  // ... 其他初始化代码
}

2. 修正onItemSelect方法

onItemSelect(item: any) {
  // 根据选中项的item_id设置对应布尔值为true
  if (item.item_id === 1) {
    this.option1boolean = true;
  } else if (item.item_id === 2) {
    this.option2boolean = true;
  }
}

3. 补充取消选中的处理（可选）

如果需要在取消选中选项时将对应布尔值设为false，需要绑定组件的onDeSelect事件：

组件类中添加方法

onItemDeSelect(item: any) {
  if (item.item_id === 1) {
    this.option1boolean = false;
  } else if (item.item_id === 2) {
    this.option2boolean = false;
  }
}

模板中绑定事件

<ng-multiselect-dropdown
  [data]="dropdownList"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="onItemDeSelect($event)"
  (onSelectAll)="onSelectAll($event)"
></ng-multiselect-dropdown>

4. 全选/全取消的处理（可选）

如果需要处理全选或全取消的场景，补充以下方法：

onSelectAll(items: any) {
  items.forEach((item: any) => {
    if(item.item_id === 1) this.option1boolean = true;
    if(item.item_id === 2) this.option2boolean = true;
  });
}

onDeSelectAll(items: any) {
  this.option1boolean = false;
  this.option2boolean = false;
}

模板中补充事件绑定：

(onDeSelectAll)="onDeSelectAll($event)"

关键说明 #

通过直接操作事件传入的item对象，就能准确匹配当前选中/取消的选项，从而正确修改对应的布尔值变量。

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