Angular ngModel未显示该值

在Html中，它不会显示已分配selectedValueModel的

ngModel

也尝试了

[ngValue]

，它为my

ngModelChange

函数提供了

undefined

提前谢谢

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：

{{food.viewValue}

更改：

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

{{food.viewValue}

致：

{{food.viewValue}

---

对于在角度材质中捕获整个对象，与纯角度相反，您使用

[value]

绑定整个对象，而不是

[ngValue]

另外，现在我们要绑定一个完整的对象，而不是一个原语，我们需要将预定义的对象与数组中的对象进行比较，这样我们就可以使用Angular提供的

compareWith

。因此，请将代码更改为：

{{food.viewValue}

然后比较如下：

compFn（c1:食物，c2:食物）：布尔值{
返回c1&&c2？c1.value==c2.value:c1==c2；
}

---

这里有一个

您在控制台中是否收到任何错误消息？您想做什么？要设置预选值还是获取所选值？我想两者兼而有之，我正在将一个对象分配给绑定到ngModel的“selectedValueModel”，当我进入页面时，它应该显示该对象（预选或预选），并且它正在显示。我的问题是如果我选择了什么，（ngMealTechange是触发，它将选择的值发送给函数，但不是整个对象的唯一值。最后，我需要选择整个对象。请考虑解释OP的代码和代码之间的区别，以及您刚才做了什么，而不是用一个代码应答来回答。ectedValueModel'绑定到ngModel，当我进入页面时，它应该显示（预选或预选）并且正在显示。我在这里的查询是我是否选择了任何内容，（ngModelChange正在触发，它正在将所选值发送到定义的函数，但不是只发送整个对象的值。最后，我需要选择整个对象。

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