ngModel не отображает значение

Question

В Html не отображается ngModel, где selectedValueModel уже назначен.
Пробовал также с [ngValue], и это дает undefined моей ngModelChange функции.

Заранее спасибо.

foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
selectedValueModel = {value: 'steak-0', viewValue: 'Steak'};
@Output() selectedValueChange = new EventEmitter()

changing(newValue: any) {
    this.selectedValueModel = newValue
    this.selectedValueChange.emit(newValue)
  }

Мой HTML:

<mat-form-field>
    <mat-select placeholder="Favorite food" 
   [(ngModel)]="selectedValueModel.value" 
   (ngModelChange)="changing($event)" name="food">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>

Answer 1

Для захвата всего объекта в материале Angular, в отличие от чисто углового, вы используете [value] для связывания всего объекта вместо [ngValue].

Кроме того, теперь, когда мы связываем весь объектвместо примитива нам нужно сравнить ваш предопределенный объект с объектом в массиве, поэтому мы можем использовать compareWith, предоставленный Angular.Поэтому измените свой код на:

<mat-select placeholder="Favorite food" [(ngModel)]="selectedValueModel" 
  (ngModelChange)="changing($event)" name="food" [compareWith]="compFn">
  <mat-option *ngFor="let food of foods" [value]="food"> <!-- Add food as value! -->
    {{food.viewValue}}
  </mat-option>
</mat-select>

А затем сравните с:

compFn(c1: Food, c2: Food): boolean {
  return c1 && c2 ? c1.value === c2.value : c1 === c2;
}

Вот StackBlitz !

Answer 2

Изменение:

<mat-form-field>
<mat-select placeholder="Favorite food" 
[(ngModel)]="selectedValueModel.value"
(ngModelChange)="changing($event)" name="food">
  <mat-option *ngFor="let food of foods" [value]="food.value">
    {{food.viewValue}}
  </mat-option>
</mat-select>

до:

<mat-form-field>
<mat-select placeholder="Favorite food" 
[(ngModel)]="selectedValueModel"
(ngModelChange)="changing($event)" name="food">
  <mat-option *ngFor="let food of foods" [value]="food.value">
    {{food.viewValue}}
  </mat-option>
</mat-select>