带有对象的角度材质多选选项

Posted 2023-02-22

【中文标题】带有对象的角度材质多选选项

【英文标题】：Angular Material Multiple Select Options with Object

【发布时间】：2018-04-25 00:19:41

【问题描述】：

当前设置：

角 4 角材料 Firebase (Firestore)

预期行为：

最初从我的角度材料多选中的数组中选择多个对象。

当前行为：

最初没有选择任何项目。 单击它们时会正确选择它们。 将它们保存在 Firebase(Firestore) 中工作（保存文档参考）

附加说明：

如果我只使用对象属性，它们最初会被正确选择。 classe.multiclassement 是一个引用数组 classes 是我的对象数组

代码示例：

<mat-select placeholder="Multiclassement" [(ngModel)]="classe.multiclassement" multiple>
  <mat-option *ngFor="let c of classes | async" [value]="c">c.nom</mat-option>
</mat-select>

【问题讨论】：

你可以发plunker 来复制它吗？

【参考方案1】：

由于我们正在处理对象，multiclassesment 数组中的对象没有引用 classes 数组中的对象，因此 Angular 无法进行绑定。我们可以像这样使用compareWith (docs) 来解决这个问题：

<mat-select [compareWith]="compareWithFn" placeholder="Multiclassement" 
            [(ngModel)]="classe.multiclassement" multiple>

和 TS：

compareWithFn(item1, item2) 
  return item1 && item2 ? item1.nom === item2.nom : item1 === item2;

DEMO

【讨论】：

没问题，很高兴能帮上忙！ :)