无法以角度预选多项选择中的值答案

【问题标题】：Unable to preselect values in multiple select in angular无法以角度预选多项选择中的值
【发布时间】：2019-02-25 03:29:29
【问题描述】：

即使 [selectedModels] 列表中填充了 [options] 列表中的 [same objects]，也无法预选值。

 <select multiple [(ngModel)]="selectedModels" class="col-md-7 form-control">
      <option [ngValue]="obj" [selected]="checkIfSelected(obj)" *ngFor="let obj of options">{{obj.name}}</option>
 </select>

也尝试使用 [selected]，但无法成功。 'checkIfSelected' 方法返回正确的布尔值。

寻求快速帮助。谢谢！！

从服务调用加载 selectedModels 列表后，从选项列表中更改对象

this.selectedModels.forEach(sm => {
      sm = this.options.find(o => o.id == sm.id);
})

【问题讨论】：

您能说明您是如何填充selectModels 属性的吗？
更新了我的问题@Jota.Toledo
一会儿我会添加一个答案，给我一些时间
请参考我的回答

标签： angular html select angular-ngmodel

【解决方案1】：

主要问题是您试图设置 reference 变量 inside of forEach 方法，这不会对正在迭代的数组产生影响.

这种情况如果你会设置引用变量的个别成员，但这会给你留下2个不同的对象，这将不可避免地破坏选择功能.

解决问题的最简单方法（跟踪选定对象 + 加载选项时更新选定对象）是通过更改来采用不可变的方法：

this.selectedModels.forEach(sm => {
      sm = this.options.find(o => o.id == sm.id);
})

到

const nextSelected = this.options
  .filter(option => this.selectedModels.some(selected => selected.id === option.id)
this.selectedModels = nextSelected;

请参阅 this stackblitz 以获取展示我的答案的一组示例。

【讨论】：