Affichage de la valeur ngModel pour mat-select
J'utilise Angular Material Select pour afficher les jours fériés. Lorsque l'utilisateur sélectionne un jour férié, je voudrais afficher la date au lieu du nom du jour férié. Par exemple, si l'utilisateur sélectionne "Noël", Je souhaite que la valeur sélectionnée affiche "25 décembre"
<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>
J'ai mis ngmodel à la date correcte lors du changement sélectionné:
selectedHoliday: string;
holidays = [
{ name: 'Christmas', date: 'Dec 25'} ,
{ name: 'New Years', date: 'Jan 1'}
]
eventSelection(event){
this.selectedHoliday = event.date
}
Lorsque j'ai défini selectedHoliday sur la date, rien ne s'affiche comme valeur sélectionnée. Voici un plongeur: https://plnkr.co/edit/9lhHJhNyuWUxqYF6nMwK?p=preview
Les options value sont définies sur l'objet holiday et [(ngModel)] sur la propriété date de l'événement sélectionné, dans votre cas holiday.date.
Ainsi, select recherche l'option avec la valeur holiday.date mais vos options ont une valeur holiday.
Le select[(ngModel)] doit être corrélé au value de son option.
[value]="holiday.date"