网站搜索

angular - ngModel 未显示值


在 HTML 中,当 selectedValueModel 已经被赋值时,并没有显示 ngModel。
也尝试过使用 [ngValue],但它还是给我的 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:

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

答案#1

对于那些可能在这里遇到他们的 ngModel 无法显示模型值问题的人,表单中可能还有另一个具有相同 name 的输入。例如。

<form>
    <input [(ngModel)]="selectedValueModel.value" name="food">
    <input [(ngModel)]="anotherModel" name="food">
</form>

答案#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>