Angular 角度-对象作为选择选项值

我有一个带有各种选择框的表单，这些选择框使用对象作为值：

当我通过表单创建新记录时，它非常有效。现在，当我编辑记录时，我遇到了一个问题，

mat select option

中的

对象

不是我从rest服务获得的“同一”对象，因此我的选择框在编辑记录时没有选择任何选项

在决定选择哪个选项时，是否可以告诉选择框小部件匹配

object.id

？我想我可能需要写一个指令来处理这个问题，但也许这已经可以通过Angular或Angular材质库或其他现有解决方案实现

要详细说明，我有我的

foo.component.ts

文件：

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

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

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

和我的

.html

文件：

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

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

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

---

它是

[compareWith]

指令。Angular.io目前处于关闭状态，因此我将对此进行墨写以供参考

HTML

也许这可以帮助您：可能的重复可能会有帮助：angular/35945293

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