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>

我会将模型分配给选择菜单，所以我按照以下方式编辑代码（我看到它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等。所以我只想对每个菜单（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>

更多信息here

Answer 2

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

为每个JSONObject jsonObject1 = new JSONObject(First_JSON); JSONObject jsonObject2 = new JSONObject(Socond_JSON); JSONObject jsonObject3 = new JSONObject(); jsonObject3.put("json_obj", jsonObject1.getInt("json_obj")+jsonObject2.getInt("json_obj"));设置一个方法是正确的方法，每个方法都应该有它的＆＃39;自己的逻辑

如果我误解了，请告诉我

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

Answer 3

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

    //our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core'

@Component({
  selector: 'my-app',
  host: {
    '(mouseenter)':'MouseEnter()'
    '(mouseout)':'MouseOut()'
   },
  template: `
    <img [src]="source"/>
    `
})
export class App {
  source='images/angular.png';

  MouseEnter(){
    console.log('Hovering');
    this.source = 'images/car.png';  
  }

  MouseOut(){
    this.source='images/angular.png';
  }
}

如何从选择中选择选项并将其指定为选择ngModel

3 个答案: