Question

以下代码用于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>

options数组可以像[{id: 0, name="First"}, {id: 1, name="Second"}]一样简单。我之前的工作意味着，当我做出新的选择时，我能够获得所选选项的价值。现在，该值与标签（选项的innerText）相同。

现在，在beta 14 和 15 中，相同的代码不再有效。它是Angular 2的一个错误还是引入了一个重大变化，我需要在我自己的代码中引入？

Answer 1

是的，即使我早点面对它。我将[value]更改为[attr.value]，然后就开始工作了。我希望它对你也有用..

查看测试版14和15 here

中的其他更改

Answer 2

我猜你只想要id方法中的handleChange()？

如何访问方法中的id？

试试这个：

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

$event对象的形状由事件的任何引发决定。该事件来自DOM，因此$event必须是标准DOM事件对象。 $event.target为我们提供了HTMLInputElement，其中包含一个包含id的值属性。

See also Angular Docu

Answer 3

你可以

通过options按ID
或使用[ngValue]（在测试版15中引入）直接使用对象值

@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

Angular2选择问题

3 个答案: