Angular Material 多个 Select 对象选项

Question

当前设置：

• Angular 4
• Angular Material
• Firebase（Firestore）

预期行为：

• 最初 select 在我的 angular material 多个 select.
中从我的数组中获取多个对象

当前行为：

• 最初没有项目 selected。
• 单击它们时它们会得到正确的 selected。
• 在 Firebase(Firestore) 中保存它们（保存文档参考）

补充说明：

• 如果我只使用一个对象 属性，它们最初 select 会得到正确的编辑。
• 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;
}

DEMO