Question

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

我的实际HTML代码：

18014398509481985

在我的组件中：

<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); }，但我没有成功获取viewValue参数（数字）。我怎么能设法得到它？

我希望例如在用户点击“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
}

获得材料选项角度5的值

2 个答案: