带对象的角材料多重选择选项

Question

当前设置：

• 角4
• 角材料
• Firebase（Firestore）

预期行为：

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

当前行为：

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

附加条款） ：

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

代码示例：

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

Answer 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;
}

演示