如何从 select 中获取选定的选项并将其分配给 select ngModel答案

【问题标题】：How to get selected option from select and assign it to select ngModel如何从 select 中获取选定的选项并将其分配给 select ngModel
【发布时间】：2016-09-09 10:05:28
【问题描述】：

我有以下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>

我会为选择菜单分配一个模型，所以我按以下方式编辑了代码（我看到它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 上它会触发组件中的以下方法：

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

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

【问题讨论】：

标签： select angular angular2-forms angular2-ngmodel

【解决方案1】：

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

第一种方式（首选）：

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

更多信息here

【讨论】：

【解决方案2】：

如果我正确理解您的问题，那么每个菜单都有不同的用途，因此，尝试以某种方式组合所有这些菜单的调用方法是不正确的。

为每个<select>s 设置一个方法是正确的方法，每个人都应该有自己的逻辑

如果我理解错了请告诉我

使用[(MyForm.firstMenu)] 将选择绑定到您的firstMenu 属性

【讨论】：

我只想当用户选择A选项时，A的值被分配给myForm.firstMenu。如果用户从第二个菜单中选择B 选项，则值B 将分配给myForm.secondMenu 模型。等等下一个菜单...
@smartmouse 如果您觉得有帮助，请务必将答案标记为已接受，以供未来的观众：)
完成，谢谢你的提醒；）我现在看到有人对我的回答投了反对票:(

【解决方案3】：

根据您的具体要求，应该这样做：

<select [(ngModel)]="myForm.firstMenu"

constructor() {
  this.myForm.firstMenu = items[0];
}

【讨论】：