如何从选择中获取所选选项并将其分配给选择 ngModel [英] How to get selected option from select and assign it to select ngModel

问题描述

我有以下 select 菜单:

<标签>第一个菜单<select name="first-menu"><option *ngFor="let i of items" [value]="i.name">{{i.name}}</option></选择>

我会将模型分配给选择菜单，因此我按以下方式编辑了代码(我看到它此处):

<标签>第一个菜单<select [ngModel]="myForm.firstMenu" (ngModelChange)="onSelected($event)" name="first-menu"><option *ngFor="let i of items" [value]="i.name">{{i.name}}</option></选择>

在 ngModelChange 上触发组件中的以下方法:

onSelectedFirstMenu(e: any): void {myForm.firstMenu = e;}

由于我必须添加多个菜单，我会重复使用代码，因此我不想为每个 html 菜单创建多个方法，例如 onSelectedSecondMenu、onSelectedThirdMenu 等等.所以我只想为每个菜单(myForm.secondMenu、myForm.thirdMenu 等等...)使用不同的 ngModel 来获得选定的选项.在 Angular2 中可以吗?

解决方案

我解决了，有两种方法可以获得相同的行为:

第一种方式(首选):

<标签>第一个菜单<select [(ngModel)]="myForm.firstMenu" name="first-menu"><option *ngFor="let i of items" [value]="i.name">{{i.name}}</option></选择>

第二种方式:

<标签>第一个菜单<select [ngModel]="myForm.firstMenu" (ngModelChange)="myForm.firstMenu = $event" name="first-menu"><option *ngFor="let i of items" [value]="i.name">{{i.name}}</option></选择>

更多信息这里

I have the following select menu:

<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>

On ngModelChange it triggers the following method in the component:

onSelectedFirstMenu(e: any): void {
    myForm.firstMenu = e;
}

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:

First way (preferred):

<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>

Second way:

<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>

More info here

这篇关于如何从选择中获取所选选项并将其分配给选择 ngModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！