angular - 显示 mat-select 的 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 的选项但你的选择有值(value)holiday .

select [(ngModel)]必须关联到 value它的 option .

[value]="holiday.date"

Updated Plunker fork