显示MatSelect的ngModel值

Question

我正在使用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

Answer 1

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

因此，select寻找具有价值的期权，holiday.date但您的期权具有价值holiday。

在select [(ngModel)]具有关联到value它的option。

[value]="holiday.date"

更新的柱塞叉