显示 mat-select 的 ngModel 值 [英] Displaying ngModel value for mat-select

问题描述

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

I am using Angular Material Select to display holidays. When the user selects a holiday, I would like to display the date instead of the holiday name. For example, if the user selects "Christmas", I want the selected value to should show "December 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 设置为正确的日期:

I set ngmodel to the correct date on select change:

selectedHoliday: string;

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


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

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

When I set selectedHoliday to the date, nothing displays as the selected value. Here is a plunker: https://plnkr.co/edit/9lhHJhNyuWUxqYF6nMwK?p=preview

推荐答案

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

The options value is set to the holiday object and [(ngModel)] is set to the date property of the selected event, in your case holiday.date.

所以 select 寻找值为 holiday.date 的选项，但你的选项有值 holiday.

So the select looks for the option with value holiday.date but your options have value holiday.

select [(ngModel)] 必须与其 option 的 value 相关.>

The select [(ngModel)] has to correlate to the value of its option.

[value]="holiday.date"

更新的 Plunker 叉

这篇关于显示 mat-select 的 ngModel 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！