无法在 angular 中的多个 select 中预置 select 值

Question

无法预选值，即使 [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);
})

Answer 1

主要问题是您试图在方法中设置 参考变量 ，这不会对正在迭代的数组产生影响。

如果如果您将设置引用变量的各个成员，情况就是如此，但这会给您留下 2 个不同的对象, 什么会不可避免地破坏 select 功能。

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

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 以获取展示我的答案的一组示例。

无法在 angular 中的多个 select 中预置 select 值

Unable to preselect values in multiple select in angular

html

select

angular-ngmodel

angular