Angular2 ngModel select

Question

最初のセレクタlevelNumの値を選択すると、最初に選択したオブジェクトがオブジェクトに表示され、2番目に選択すると2つの異なる番号が表示されますセレクタは分離されていますが、同じ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がお手伝いします：this.levelNumであるオブジェクトの種類を

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