Angular Material 6中动态选中下拉框已选选项的实现

我来帮你搞定这个Angular Material多选下拉框的回显问题，核心就是让下拉框的选中值和你从数据库拿到的skill_ids数组做匹配，下面是两种常用的实现方案，你可以根据自己的表单类型选择：

方案一：响应式表单直接绑定（推荐） #

如果你的表单用的是Angular响应式表单，这是最简洁的方式，不需要额外写判断方法：

1. 模板调整 #

确保你的mat-select绑定对应的表单控件，并且mat-option的value设置为技能的ID（和数据库返回的skill_ids类型一致，比如数字）：

<mat-form-field>
  <mat-label>已选技能</mat-label>
  <mat-select [formControl]="skillsControl" multiple>
    <mat-option *ngFor="let skill of allSkillsList" [value]="skill.id">
      {{ skill.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

2. 组件逻辑赋值 #

当你获取到数据库的用户资料（包含skill_ids数组）后，直接把这个数组赋值给表单控件即可：

import { FormControl } from '@angular/forms';

// 定义表单控件（如果是表单组的话，就放到FormGroup里）
skillsControl = new FormControl([]);
// 假设这是你从数据库拿到的用户数据
userProfile = { skill_ids: [1, 3, 7] };
// 所有可选技能列表（比如从接口获取）
allSkillsList = [
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Java' },
  { id: 3, name: 'TypeScript' },
  { id: 7, name: 'React' },
  // 其他技能...
];

ngOnInit(): void {
  // 把已选技能ID数组赋值给控件，下拉框会自动匹配选中
  this.skillsControl.setValue(this.userProfile.skill_ids);
}

这样mat-select会自动找到所有value等于skill_ids中元素的选项，并将它们设为选中状态。

方案二：手动判断选中状态（适用于非响应式表单场景） #

如果你需要用到你提到的checkSelectedOptions方法，或者用的是模板驱动表单，可以通过手动判断每个选项是否在已选ID数组中来实现回显：

1. 实现checkSelectedOptions方法 #

在组件中编写判断逻辑：

// 已选技能ID数组（从数据库获取）
selectedSkillIds = [1, 3, 7];

checkSelectedOptions(skillId: number): boolean {
  // 判断当前技能ID是否在已选数组中
  return this.selectedSkillIds?.includes(skillId) || false;
}

2. 模板中绑定选中状态 #

给mat-option添加[selected]属性，调用上面的方法：

<mat-form-field>
  <mat-label>已选技能</mat-label>
  <mat-select multiple [(ngModel)]="selectedSkillIds">
    <mat-option *ngFor="let skill of allSkillsList" 
                [value]="skill.id" 
                [selected]="checkSelectedOptions(skill.id)">
      {{ skill.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

注意事项 #

• 确保类型匹配：数据库返回的skill_ids元素类型（比如数字）必须和mat-option的value类型完全一致，否则会匹配失败（比如不能一边是数字1，另一边是字符串"1"）。
• 等待技能列表加载完成：如果allSkillsList是异步获取的（比如从接口请求），要等数据返回后再给表单控件赋值或者调用判断方法，避免出现空数组匹配的问题。
• 表单组场景：如果你的mat-select属于一个FormGroup，那赋值时要对应到具体的表单控件，比如：

  this.myForm.get('skills')?.setValue(this.userProfile.skill_ids);
  

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