首页 文章

Angular Material使用Object多选选项

提问于
浏览 次
4

Current Setup :

  • Angular 4

  • 角质材料

  • Firebase（Firestore）

Expected Behavior :

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

Current Behavior :

  • 最初未选择任何项目 .

  • 单击它们时会正确选择它们 .

  • 将它们保存在Firebase（Firestore）工作中（保存文档参考）

Additional Note(s) :

  • 如果我只使用一个对象属性，它们最初会被正确选中 .

  • classe.multiclassement是一个参考数组

  • classes是我的对象数组

Code Sample :

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

1 回答

  • 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

    回复于

相关问题