Angular中ng-multiselect-dropdown组件加载时自动选中API返回项的方法

核心问题 #

ng-multiselect-dropdown的[(ngModel)]要求绑定的是与数据源[data]结构完全一致的对象数组，而非单纯的ID数组。你目前的问题大概率是直接将从API获取的ID数组赋值给了emp_id，导致组件无法匹配到对应的选项。

具体解决步骤 #

1. 转换已选数据格式
   当从API获取到已保存的员工ID数组后，需要从empList中筛选出对应的完整对象，再赋值给emp_id：

   // 假设从API获取的已保存ID数组为savedEmpIds
   this.yourApiService.getSavedEmployeeIds().subscribe(savedIds => {
     // 从empList中匹配出对应ID的员工对象
     this.emp_id = this.empList.filter(employee => savedIds.includes(employee.Employee_Number));
   });
   

2. 确保数据加载顺序
   要保证empList先于已选数据加载完成，避免因异步顺序问题导致筛选失败。可以用RxJS操作符处理：

   import { switchMap } from 'rxjs/operators';
   
   // 先获取员工列表，再获取已选ID并转换
   this.yourApiService.getEmployeeList().pipe(
     switchMap(empList => {
       this.empList = empList;
       return this.yourApiService.getSavedEmployeeIds();
     })
   ).subscribe(savedIds => {
     this.emp_id = this.empList.filter(employee => savedIds.includes(employee.Employee_Number));
   });
   

3. 提交时提取ID
   若数据库只需要保存员工ID，提交时从emp_id中提取ID即可：

   const submitEmployeeIds = this.emp_id.map(emp => emp.Employee_Number);
   // 将submitEmployeeIds提交到数据库
   

验证要点 #

• 确认emp_id中的每个对象都包含Employee_Number和Name字段，与empList的结构完全一致
• 检查dropdownSettings中的idField和textField是否与对象字段名严格匹配

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