显示MatSelect的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设置为日期时，没有任何内容显示为所选值.这是一个小矮人: https://plnkr.co/edit/9lhHJJNyuWUxqYF6nMwK?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相关.

[value]="holiday.date"

更新了Plunker前叉

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