typescript - Angular - Objetos como valores de opciones de selección

Tengo un formulario con varios cuadros de selección que usan objetos como valor:

<mat-option [value]="object">

Lo cual funciona muy bien cuando estoy creando nuevos registros a través del formulario. Ahora, cuando estoy editando registros, me encuentro con el problema de que el object en el mat-select-option no es el "mismo" objeto que obtengo de mi servicio REST, por lo que mis cajas de selección no tienen ninguna opción seleccionada al editar el registro.

¿Es posible indicarle al widget de caja de selección que coincida con object.id al decidir qué opción está seleccionada? Creo que puede que necesite escribir una directiva para manejar esto, pero tal vez esto ya sea posible con las bibliotecas de Angular o Angular Material, o con otra solución existente.

Para elaborar, tengo mi archivo foo.component.ts:

let item = {
    'fruit': { id: 1, 'label': 'Pineapple' },
}

let options = [
    { 'id':1, 'label': 'Pineapple' },
    { 'id':2, 'label': 'Banana' },
    { 'id':3, 'label': 'Papaya' }
]

Y mi archivo .html:

<mat-select  placeholder="Fruit" [(ngModel)]="item.fruit">
  <mat-option *ngFor="let option of options" [value]="option">{{option.label}}</mat-option>
</mat-select>

Cuando el usuario visita la página, debería ver "Piña" seleccionada en el mat-select. Debido a que el 'pineapple' en el item.fruit y la matriz options no apuntan al mismo objeto 'pineapple', el mat-select está vacío.

Me gustaría ver algo como:

<mat-select          
    placeholder="Fruit" 
    [(ngModel)]="item.fruit" 
    equalityAttr="id"
>

Respuesta #1

Es la directiva [compareWith]. Angular.io está caído en este momento, así que enlazaré a este artículo de Medium como referencia.

HTML

<mat-select  
    placeholder="Fruit" 
    [(ngModel)]="item.fruit"
    [compareWith]="objectComparisonFunction">

   <mat-option *ngFor="let option of options" [value]="option">{{option.label}}</mat-option>
</mat-select>

TypeScript

  public objectComparisonFunction = function( option, value ) : boolean {
    return option.id === value.id;
  }