显示 mat-select 的 ngModel 值

【问题标题】：Displaying ngModel value for mat-select显示 mat-select 的 ngModel 值
【发布时间】：2018-01-09 14:37:35
【问题描述】：

我正在使用 Angular Material Select 来显示假期。当用户选择假期时，我想显示日期而不是假期名称。例如，如果用户选择“圣诞节”，我希望所选值应显示“12 月 25 日”

<mat-form-field>
  <mat-select [(ngModel)]="selectedHoliday" placeholder="Select A Holiday" (change)="eventSelection($event.value)">
    <mat-option *ngFor="let holiday of holidays" [value]="holiday">{{ holiday.name }}</mat-option>
  </mat-select>
</mat-form-field>

我在选择更改时将 ngmodel 设置为正确的日期：

selectedHoliday: string;

holidays = [
 { name: 'Christmas', date: 'Dec 25'} ,
 { name: 'New Years', date: 'Jan 1'}
]


eventSelection(event){
 this.selectedHoliday = event.date
}

当我将 selectedHoliday 设置为日期时，没有任何内容显示为所选值。这是一个笨蛋：https://plnkr.co/edit/9lhHJhNyuWUxqYF6nMwK?p=preview

【问题讨论】：

标签： angular select angular-material angular-ngmodel

【解决方案1】：

选项value 设置为holiday 对象，[(ngModel)] 设置为所选事件的date 属性，在您的情况下为holiday.date。

所以select 会查找值为holiday.date 的选项，但您的选项的值为holiday。

select [(ngModel)] 必须与其option 的value 相关联。

[value]="holiday.date"

Updated Plunker fork

【讨论】：