如何从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屋！