select - 如何从 select 中获取选定的选项并将其分配给 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>

我会为选择菜单分配一个模型，所以我按以下方式编辑了代码（我在这里看到）：

<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等等。所以我只想ngModel为每个菜单（myForm.secondMenu等等myForm.thirdMenu）使用不同的选项来获得选定的选项。Angular2有可能吗？

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

更多信息在这里

Answer 2

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

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

如果我误解了请告诉我

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

Answer 3

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

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

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