带对象的 Angular Material 多选选项

Question

当前设置:

• Angular 4
• Angular 材
• 火力地堡 (Firestore)

预期行为:

• 最初在我的 Angular Material 多重选择中从我的数组中选择多个对象。

当前行为:

• 最初没有选择任何项目。
• 点击它们时它们会被正确选中。
• 将它们保存在 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>

Answer 1

因为我们正在处理对象，所以 multiclassesment 数组中的对象没有引用 classes 数组中的对象，因此 Angular 无法进行绑定(bind)。我们可以通过使用 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