Angular2选择问题

Question

The following code used to work in Angular 2 beta 13 :

<select (change)="handleChange($event)">
    <option value="">-- please choose an option --</option>
    <option *ngFor="#option of options" [value]="option.id">{{ option.name }}</option>
</select>

The options array can be as simple as [{id: 0, name="First"}, {id: 1, name="Second"}] . What I mean by it used to work is that when a new selection was made I was able to get the value of the selected option. Right now the value is the same as the label (innerText of the option ).

Now, in beta 14 and 15 the same code does not work anymore. Is it a bug with Angular 2 or was there a breaking change introduced that I need to introduce in my own code?

Answer 1

Yes, even I faced it earlier. I changed [value] to [attr.value] and it started working. I hope it works for you too..

Check out other changes in beta 14 and 15 here

Answer 2

I guess you only want the id in your handleChange() method?

How do you access the id in your method?

Try this one:

handleChange(evt) {
    let id = (<HTMLInputElement>event.target).value;
}

The shape of the $event object is determined by whatever raises the event. The event comes from the DOM, so $event must be a standard DOM event object. The $event.target gives us an HTMLInputElement , which has a value property that contains the id.

See also Angular Docu

Answer 3

You can

• get the value assigned to an option by looking it up in your options by id

• or use [ngValue] (introduced in beta.15) to use object values directly

@Component({
    selector: 'my-app',
    template: `
    <div>selected: {{selected1 | json}}</div>
    <select (change)="handleChange($event)">
      <option value="">-- please choose an option --</option>
      <option *ngFor="#option of options" [value]="option.id">{{ option.name }}</option>
    </select>    

    <div>selected: {{selected2 | json}}</div>
    <select [(ngModel)]="selected2">
      <option value="">-- please choose an option --</option>
      <option *ngFor="#option of options" [ngValue]="option">{{ option.name }}</option>
    </select>`
})
export class AppComponent {
  options = [{id: 0, name:"First"}, {id: 1, name:"Second"}];
  selected1;
  selected2 = "";

  handleChange(event) {
    console.log(event.target.value);
    this.selected1 = this.options.filter((option) => {
      return option.id == event.target.value;
    })[0];    

  }
}

Plunker example beta.16