Question

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

<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的{{1}}相关联。

option

Updated Plunker fork

显示mat-select的ngModel值

1 个答案: