Angular响应式表单用mat-selection-list报错：values.map is not a function求助

当然有人成功在响应式表单里用mat-selection-list啦！你遇到的这个报错，核心原因是组件和表单控件的值类型不匹配，我来给你一步步解决：

问题根源 #

mat-selection-list默认会把选中的MatListOption实例数组传给绑定的表单控件，但你在模板里设置了[value]="act.id"，期望表单控件拿到的是id数组。如果你的表单初始值是id数组，或者后续代码里把控件值当成id数组去调用map方法，就会因为实际是Option对象数组而报错。

解决方案一：用compareWith（推荐） #

这是最规范的做法，让表单控件正确识别选中选项对应的id值：

1. 在组件类里定义一个比较函数：

compareIds(id1: number, id2: number): boolean {
  return id1 === id2;
}

2. 修改模板，给mat-selection-list加上[compareWith]="compareIds"：

<div class="form-group" [formGroup]="activityForm">
  <mat-selection-list 
    formControlName="activity" 
    (selectionChange)="onActivitySelected($event)"
    [compareWith]="compareIds">
    <mat-list-option *ngFor="let act of activities" [value]="act.id">
      {{act.name}}
    </mat-list-option>
  </mat-selection-list>
</div>

3. 表单初始化时，直接给控件设置id数组类型的初始值：

// 假设你用FormBuilder
this.activityForm = this.fb.group({
  activity: [[]] // 空数组表示初始无选中，也可以设成比如[2,5]这种已选中的id数组
});

解决方案二：手动转换选中值（临时场景适用） #

如果不想用compareWith，可以在选择事件里手动把Option对象转成id数组再赋值给控件：

onActivitySelected(event: MatSelectionListChange) {
  // 从选中的Option里提取id值
  const selectedIds = event.source.selectedOptions.selected.map(option => option.value);
  // 把id数组赋值给表单控件
  this.activityForm.get('activity')?.setValue(selectedIds);
}

⚠️ 注意：这种方式下，表单控件的初始值也必须是数组类型，不能是单个值或undefined。

额外提醒 #

• mat-selection-list默认是多选组件，如果你的需求是单选，更推荐用mat-radio-group，避免不必要的数组处理问题。
• 始终确保表单控件的初始值类型和组件返回的最终值类型一致，这是响应式表单的核心原则之一。

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