Angular2 ngModel选择

Question

I don't have idea how would i put selected value to Object or to Array, if i select first selector levelNum value will have object with first selected and if i select second it will have two different number inside for seperated selectors but still same ngModel name. I need this way for dynamic selectors which i get from ng-for. Here is my code:

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

I don't understand your problem properly, but maybe this plunker will help you:

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