Угловое значение mat-select 2 way Привязка данных с использованием объекта

Question

В HTML-шаблоне Angular у меня есть элемент select с директивой mat-select (Angular Material), который загружает данные из объекта, хранящегося в свойстве selectedCriteria в файле .ts сервиса.Три типа объектов могут быть сохранены в свойстве selectedCriteria на основе логики приложения, и все они имеют переменную name типа String.Поэтому я хочу загрузить имя объекта в этот элемент выбора.Проблема в том, что когда приложение загружается, элемент select не загружает / не показывает «selectedCriteria», потому что это объект, а не строка.Я могу использовать selectedCriteria.name, чтобы связать его со строковым значением, но это добавит дополнительный код для преобразования из объекта в строку и наоборот для двухстороннего связывания данных.Каково решение для загрузки объекта в этот элемент select во время запуска приложения?

<mat-form-field style="width: 45%; display: inline-block">
      <mat-select placeholder="Criteria" [(value)]="reportService.selectedCriteria" (valueChange)="reportService.filterSalesData()">
        <mat-option *ngFor="let criteria of reportService.criteriaList" [value]="criteria">{{criteria.name}}</mat-option>
      </mat-select>
      </mat-form-field>

Answer 1

Вы можете сделать это, как показано ниже.

HTML

 <mat-form-field style="width: 45%; display: inline-block; margin-right: 40px;">
  <mat-select [(ngModel)]="selectedCriteria" (selectionChange)="onSelectValueChange()">
    <mat-option *ngFor="let criteria of criteriaList" [value]="criteria">{{criteria.name}}</mat-option>
  </mat-select>
</mat-form-field>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
selectedCriteria: User;
criteriaList: User[] = [
  { name: 'John Doe'},
  { name: 'Albert Einstein'},
  { name: 'Isaac Newton'}
];


ngOnInit(){
  this.selectedCriteria = this.criteriaList[0];
}

onSelectValueChange () {
  console.log(this.selectedCriteria);
  console.log('Type of Selection => ', typeof this.selectedCriteria);
}
}

interface User{
  name: string;
}

Пример StackBlitz