web-dev-qa-db-ja.com

mat-selectのngModel値の表示

Angular Material Selectを使用して休日を表示します。ユーザーが休日を選択するとき、休日の名前ではなく日付を表示したいと思います。たとえば、ユーザーが "Christmas"を選択した場合、選択した値に「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

angularselectangular-materialangular-ngmodel
5
ellier7

オプションvalueはholidayオブジェクトに設定され、[(ngModel)]は選択されたイベントのdateプロパティに設定されます。あなたの場合は_holiday.date_。

したがって、selectは、値_holiday.date_のオプションを探しますが、オプションには値holidayがあります。

select[(ngModel)]は、そのvalueのoptionと相関する必要があります。

_[value]="holiday.date"
_

更新されたPlunkerフォーク

9
Sashel Niles Gruber