如何在Angular 2（TypeScript）中獲得正確的引用變量值？

Question

我正在使用Angular 2（TypeScript）。

我有一個類，它看起來像這樣：

class Device{ 
    id:string; 
    label:string; 
} 

我想表明在下拉列表設備標籤，但在的onChange（）我想獲得設備ID。我能做什麼？謝謝！

<select #device (change)="onChange($event, device.value)"> 
    <option *ng-for="#i of devices.label">{{i}}</option> 
</select> 

onChange($event, deviceValue) { 
    console.log(deviceValue); 
    // Right now deviceValue is device label, however I want to get device ID. 
} 

Answer 1

只需添加一個綁定到<option>（[value]="device.id"）的value財產。見this plunk：

import {Component, NgFor} from 'angular2/angular2' 

@Component({ 
    selector: 'my-app', 
    directives: [NgFor], 
    template: ` 
    <select #device (change)="onChange($event, device.value)"> 
     <option *ng-for="#device of devices" [value]="device.id"> 
     {{ device.label }} 
     </option> 
    </select> 
    ` 
}) 
export class App { 
    constructor() { 
    this.devices = [ 
     { id: 1, label: 'Nokia' }, 
     { id: 2, label: 'Motorola' }, 
     { id: 3, label: 'iPhone' } 
    ] 
    } 

    onChange(event, deviceValue) { 
    console.log(deviceValue); 
    } 
}