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

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

1 个答案: