typescript - Angular - Objetos como Valores de Opções de Seleção

Eu tenho um formulário com várias caixas de seleção que usam objetos como valor:

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

O que funciona muito bem quando estou criando novos registros através do formulário. Agora, quando estou editando registros, me deparo com o problema de que o object no mat-select-option não é o mesmo objeto que eu recebo do meu serviço REST, então minhas caixas de seleção não têm nenhuma opção selecionada ao editar o registro.

É possível configurar o widget de caixa de seleção para corresponder a object.id ao decidir qual opção está selecionada? Acho que talvez eu precise escrever uma diretiva para lidar com isso, mas talvez isso já seja possível com as bibliotecas Angular ou Angular Material, ou outra solução existente.

Para elaborar, eu tenho meu arquivo foo.component.ts:

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

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

E meu arquivo .html:

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

Quando o usuário visita a página, ele deve ver "Abacaxi" selecionado no mat-select. Como o 'abacaxi' em item.fruit e no array options não estão apontando para o mesmo objeto 'abacaxi', o mat-select está vazio.

Eu gostaria de ver algo como:

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

Resposta #1

É a diretiva [compareWith]. O Angular.io está fora do ar no momento, então vou linkar para este artigo do Medium como referência.

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;
  }