Angular2 ngModel 选择

Question

我不知道如何将选定的值放入对象或数组中，如果我选择第一个选择器 levelNum 值将具有第一个选择的对象，如果我选择第二个它将有两个不同的数字用于单独的选择器但是仍然是相同的 ngModel 名称。对于从 ng-for 获得的动态选择器，我需要这种方式。这是我的代码：

//our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core'
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
//import 'rxjs/Rx';
@Component({
  selector: 'my-app',
  template:`
    <h1>Selecting Number</h1>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()">
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>
     <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()">
      <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option>
    </select>
    {{levelNum}}
  `,
})
export class AppComponent {
  levelNum: any;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}
  ];
  toNumber(){
    this.levelNum = +this.levelNum;
    console.log(this.levelNum);
  }
}

Answer 1

我没有正确理解你的问题，但也许这个 plunker 会帮助你：

https://plnkr.co/edit/sGvWZoaP5EWDkkUJE0R2?p=preview

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <select (change)="levelChanged('uniqueName1', $event.target.value)">
        <option *ngFor="let lvl of _levels" [value]="lvl.value">{{lvl.name}}</option>
      </select>
      Selected Level1: {{_selectedLevel['uniqueName1']}}

      <br />

      <select (change)="levelChanged('uniqueName2', $event.target.value)">
        <option *ngFor="let lvl of _levels" [value]="lvl.value">{{lvl.name}}</option>
      </select>
      Selected Level2: {{_selectedLevel['uniqueName2']}}

      <br /><br />

      Selected Level-Array:

      <br /><br />

      {{_selectedLevel | json}}
    </div>
  `,
})
export class App {

  const _levels = [
    { value: 0, name: "AA" },
    { value: 1, name: "BB" },
    { value: 2, name: "CC" },
    { value: 3, name: "DD" },
  ];

  private _selectedLevel = {};

  constructor() {
    this.name = 'Angular2'
  }

  levelChanged(name: string, lvl: any) {
    this._selectedLevel[name] = +lvl;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}