Angular Material Multiple Choices with an Object

Question

Current setting:

• Angular 4
• Angular Material
• Firebase (firestore)

Expected Behavior:

• Initially selecting multiple objects from my array inside my angular material, select multiple.

Current behavior:

• The item was not initially selected.
• When you click on them, they are selected correctly.
• Saving them in Firebase (Firestore) (Saving a link to a document)

Additional notes:

• If I use only the property of the object, it really is selected correctly from the very beginning.
• classe.multiclassement is an array of links
• classes are my array of objects

Code example:

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

Run code

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