如何从 select 获取 selected 选项并将其分配给 select ngModel

Question

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

我想在 select 菜单中添加一个模型，所以我按以下方式编辑了代码（我看到了）：

<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 以获得 selected 选项。在 Angular2 中可以吗？

Answer 1

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

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

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

Answer 2

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

对每个 <select> 都有一个方法是正确的方法，每个方法都应该有自己的逻辑

如果理解有误请告知

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

Answer 3

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

第一种方式（首选）：

<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

如何从 select 获取 selected 选项并将其分配给 select ngModel

How to get selected option from select and assign it to select ngModel

select

angular2-forms

angular2-ngmodel

angular