如何从select中获取选择的选项并将其分配给选择ngModel [英] How to get selected option from select and assign it to select ngModel
问题描述
我有以下 select
菜单:
<div class="medium-3 columns">
<label>First Menu
<select name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
我会将模型添加到选择菜单,因此我以以下方式编辑了代码(我看到了它此处):
I would assing a model to the select menu so i edited the code in the following way (i see it here):
<div class="medium-3 columns">
<label>First menu
<select [ngModel]="myForm.firstMenu" (ngModelChange)="onSelected($event)" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
在 ngModelChange
上触发以下方法组件:
On ngModelChange
it triggers the following method in the component:
onSelectedFirstMenu(e: any): void {
myForm.firstMenu = e;
}
由于我必须添加几个菜单,所以我会重复使用代码,所以我不想为每个html菜单创建多个方法,例如 onSelectedSecondMenu
, onSelectedThirdMenu
等。
所以我只想为每个菜单使用不同的 ngModel
( myForm.secondMenu
, myForm.thirdMenu
等)来获取所选选项。
在Angular2中有可能吗?
Since i have to add several menu, i would make code reuse so i do not want to create multiple methods like onSelectedSecondMenu
, onSelectedThirdMenu
and so on for every html menu.
So i just want to use a different ngModel
for every menu (myForm.secondMenu
, myForm.thirdMenu
and so on...) to get the selected option.
Is it possible in Angular2?
推荐答案
我解决了,有两种方法可以实现相同的行为:
I solved and there are 2 ways to get the same behaviour:
第一种方法(首选):
<div class="medium-3 columns">
<label>First Menu
<select [(ngModel)]="myForm.firstMenu" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
第二种方式:
<div class="medium-3 columns">
<label>First Menu
<select [ngModel]="myForm.firstMenu" (ngModelChange)="myForm.firstMenu = $event" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
更多信息此处
这篇关于如何从select中获取选择的选项并将其分配给选择ngModel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!