获得材料选项角度5的值

Question

Angular的新手，我正在尝试使用Angular Material下拉菜单。 我希望它显示月份，但当用户点击它时，我想得到月份的数字，所以我可以将它用作URL参数。

我的实际HTML代码：

<mat-form-field style="width: 250px;">
     <mat-select placeholder="Sélectionnez un mois" #list [(ngModel)]="selectedOptions" name="selectedOptions" (ngModelChange)="onNgModelChange($event)">
       <mat-option *ngFor="let month of months" (mat-option)="onUpdate($event)" [value]="month.viewValue" >
            {{ month.viewValue }}
     </mat-option>
    </mat-select>
</mat-form-field>

在我的组件中：

protected months = [
    {value: '0', viewValue: 'Janvier'},
    {value: '1', viewValue: 'Février'},
    {value: '2', viewValue: 'Mars'},
    {value: '3', viewValue: 'Avril'},
    {value: '4', viewValue: 'Mai'},
    {value: '5', viewValue: 'Juin'},
    {value: '6', viewValue: 'Juillet'},
    {value: '7', viewValue: 'Août'},
    {value: '8', viewValue: 'Septembre'},
    {value: '9', viewValue: 'Octobre'},
    {value: '10', viewValue: 'Novembre'},
    {value: '11', viewValue: 'Décembre'}
];
onNgModelChange(event: Event) {
    console.log(event);
}

当我点击select时，我可以得到viewValue ，但是我没有成功获取value参数（数字）。 我怎么能设法得到它？

我希望例如在用户点击“Février”时获得数字“1”。

Answer 1

 <mat-option *ngFor="let month of months" (mat-option)="onUpdate($event)" [value]="month.value" >
        {{ month.viewValue }}
 </mat-option>

这里是你将month.viewValue作为选项值的错字，所以你永远不会得到你想要的value 。 我希望它有所帮助

Answer 2

在您的mat-select

[(ngModel)]="selectedOptions"
(change) = "getValue()"

这个特定的（ngModel）代码正在进行双向绑定。 在mat-select添加（更改）事件而不是ngModelChange

所以在你的comoponent.ts中，你可以得到它

selectedOptions: String = "0";

protected months = [
 {value: '0', viewValue: 'Janvier'},
 {value: '1', viewValue: 'Février'},
 {value: '2', viewValue: 'Mars'},
 {value: '3', viewValue: 'Avril'},
 {value: '4', viewValue: 'Mai'},
 {value: '5', viewValue: 'Juin'},
 {value: '6', viewValue: 'Juillet'},
 {value: '7', viewValue: 'Août'},
 {value: '8', viewValue: 'Septembre'},
 {value: '9', viewValue: 'Octobre'},
 {value: '10', viewValue: 'Novembre'},
 {value: '11', viewValue: 'Décembre'}
];

getValue() {
    console.log(selectedOptions); // will log the selected value
}