Angular

Question

我有一个包含各种 select 框的表单，这些框使用对象作为值：

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

当我通过表单创建新记录时，这非常有用。现在，当我编辑记录时，我运行遇到 mat-select-option 中的 object 不是我从休息服务中获得的 "same" 对象的问题，所以我的 select 框在编辑记录时没有选项 selected。

在决定 select 编辑哪个选项时，是否可以告诉 select-box 小部件在 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 中看到 "Pineapple" selected。因为 item.fruit 和 options 数组中的 'pineapple' 没有指向同一个 'pineapple' 对象 - 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;
  }

Angular - 作为 Select 选项值的对象

Angular - Objects as Select Option Values

typescript

angular-material

angular-forms