Угловой материал - прямая передача объекта в FormControl

Question

Я столкнулся с проблемой в Angular Material, когда вы не можете предварительно установить значение <mat-select>, если вы напрямую передаете объект в FormControl .

app.component.html

<!-- NOTE: The only difference is in [formControl] value -->

<!-- This example works well because I'm using 'toppings' form control -->
<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.name}}</mat-option>
  </mat-select>
</mat-form-field>

<!-- This is where it fails, no value is preselected -->
<mat-form-field>
  <mat-label>Toppings 2</mat-label>
  <mat-select [formControl]="toppings2">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.name}}</mat-option>
  </mat-select>
</mat-form-field>

app.component.ts

  toppingList: any[] = [
    {id: 42, name: "Item3123"},
    {id: 45, name: "Item444"},
    {id: 426, name: "Iteml"},
  ]
  toppings = new FormControl(this.toppingList[0]);
  toppings2 = new FormControl({id: 42, name: "Item3123"});

Как видите разницумежду начинками и начинками2 - это способ прохождения объекта.В конце концов, объект точно такой же.Я попытался сделать то же самое, не используя Angular Material (используя обычный <select>), и он прекрасно работает.

StackBlitz Link

У кого-нибудь есть объяснение такогоповедение?

Answer 1

Объяснение можно найти в первом комментарии к вашему вопросу от JB Nizet - они не являются одним и тем же объектом (они просто имеют одинаковые идентификатор и имя), поэтому обычное сравнение, такое как == или ===, не выполняется.Функция сравнения по умолчанию в MatSelect , которая используется для определения того, выбран ли элемент списка:

private _compareWith = (o1: any, o2: any) => o1 === o2;

Решение состоит в том, чтобы использовать функцию compareWith для подстановки собственногофункция сравнения:

<mat-select [formControl]="toppings2" [compareWith]="compareToppings">

compareToppings(t1, t2) {
  return t1.id === t2.id;
}

Дополнительная информация: http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html