Angular Material Multiselect编辑状态无法默认选中已分配资源问题求助

我刚看了你的代码，问题出在对象引用匹配上——Angular Material的Mat-select在多选模式下，是通过对象的引用关系来判断是否选中的。你从MAT_DIALOG_DATA里拿到的selectedResources数组里的User对象，和你本地resources数组里的对象并不是同一个引用，所以组件识别不出它们对应同一个选项，自然没法默认选中。

给你两个关键修改点，就能解决这个问题：

1. 匹配本地资源数组中的对象引用 #

在ngOnInit里，不要直接把selectedResources赋值给表单控件，而是通过唯一标识（比如id）从本地resources数组里找到对应的对象，用这些对象来设置表单值：

ngOnInit() {
  // 通过id匹配，从本地resources数组获取和selectedResources对应的对象
  const matchedSelectedResources = this.resources.filter(resource => 
    this.selectedResources.some(selected => selected.id === resource.id)
  );

  this.form = this.fb.group({
    resource: [matchedSelectedResources, Validators.required]
  });
}

这样处理后，表单控件里的对象和mat-option绑定的[value]="resource"是同一个引用，Mat-select就能正确识别并默认选中这些选项了。

2. 优化保存逻辑（可选但建议） #

你的save和close方法目前直接返回selectedResources，但用户在编辑时可能已经修改了选择，应该从表单控件里获取最新的选中值：

save() {
  this.dialogRef.close(this.form.get('resource').value);
}

close() {
  this.dialogRef.close(this.form.get('resource').value);
}

额外提醒 #

确保你的User接口里的id是唯一的，这是我们匹配对象的关键依据。如果你的资源标识不是id，换成对应的唯一字段即可。

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