How to get correct reference variable value in Angular 2 (TypeScript)?

Question

I am using Angular 2 (TypeScript).

I have a class which looks like this:

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

I want to show device label in dropdown list, but in onChange() I want to get device ID. What can I do? Thank you!

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

alexpods · Accepted Answer · 2015-11-17 23:49:43Z

2

Just add a binding to a value property of an <option> ([value]="device.id"). See 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);
  }
}

edited Nov 17, 2015 at 23:49

answered Nov 17, 2015 at 23:43

alexpods

48.7k10 gold badges104 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hongbo Miao Over a year ago

Thank you so much, alexpods, especially the link to W3!

Collectives™ on Stack Overflow

How to get correct reference variable value in Angular 2 (TypeScript)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related