Angular - 对象作为选择选项值

Question

我有一个带有各种选择框的表单，这些选择框使用对象作为值:
<mat-option [value]="object">
当我通过表单创建新记录时，这很好用。现在在编辑记录时，遇到了object的问题。在 mat-select-option不是我从休息服务获得的“相同”对象，所以我的选择框在编辑记录时没有选择选项。

是否可以告诉选择框小部件匹配 object.id在决定选择哪个选项时？我想我可能需要编写一个指令来处理这个问题，但也许这已经可以通过 Angular 或 Angular Material 库或其他现有解决方案实现。

详细说明我有我的 foo.component.ts文件:

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

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

还有我的 .html文件:

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

当用户访问该页面时，他们应该看到在 mat-select 中选择了“菠萝”。 .因为 item.fruit中的'菠萝'和 options数组没有指向同一个“菠萝”对象 - mat-select是空的。

我想看到类似的东西:

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

Answer 1

它是 [compareWith]指示。 Angular.io 目前关闭，所以我会写到这个 medium article以供引用。

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