Angular2 select 问题

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）。

现在，在测试版 14 和 15 中，相同的代码不再有效。是 Angular 2 的错误还是我需要在自己的代码中引入的重大更改？

Answer 1

是的，即使我更早遇到过。我将 [value] 更改为 [attr.value] 并且它开始工作了。希望对你也有用..

查看 Beta 14 和 15 中的其他更改here

Answer 2

我猜你只想在 handleChange() 方法中使用 id？

您如何在您的方法中访问 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]（在beta.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 examplebeta.16

Angular2 select 问题

Angular2 select issue

angular2-directives

angular2-template

angular