Angular Material使用对象

时间:2017-11-12 04:03:54

标签: angular firebase select angular-material google-cloud-firestore

当前设置:

  • Angular 4
  • Angular Material
  • 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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

由于我们正在处理对象,因此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