Angular2 - select 框更改时更新值

Question

当用户 select 在 select 框中添加新选项时，我正在尝试获取新值。

现在，我在 onSubmit 和 onFooChange 两种情况下都收到 undefined 我有点理解为什么，因为 b仅在调用后在线定义。

我见过一些不同的方法来更新 select 框中的值，但到目前为止我无法真正解决这个问题。

你能告诉我如何解决这个问题吗？

class Foo {
    constructor(
        bar: string;
    ) {}
}

foo: foo = new Foo(
    'someValueWillCome'
)
onFooChange(newBar) {
    this.foo.bar = newBar
}
onSubmit() {
    console.log('onSubmit: ', this.foo);
}

<form (ngSubmit)="onSubmit()" #fooForm="ngForm">
  <label>Location</label>
  <select [(ngModel)]="foo.bar" ngControl="bar" (click)="onFooChange(b)">
    <option *ngFor="#b of aListOfBars" [value]="b">{{b}}</option>
  </select>           
<button type="submit">Submit</button>
<form>

换句话说：如何获取selected选项值？

我设法使用 $event.target.value 解决了这个问题，但必须用 angular 方法来解决这个问题。

  <select [(ngModel)]="foo.bar" ngControl="bar" (click)="onFooChange($event.target.value)">
    <option *ngFor="#b of aListOfBars" [value]="b">{{b}}</option>

已通过将 Angular 从 2.0.15 更新到 2.0.17

解决

Answer 1

这是 Firefox 和 IE 的一个已知问题，最近已修复

见https://github.com/angular/angular/pull/8148

Answer 2

我不确定我是否理解正确；如果用户选择了不同的选项，则 foo.bar 中的值会发生变化，您已通过 [(ngModel)]="foo.bar" 绑定到 <select> ；你已经有了新的价值。

Angular2 - select 框更改时更新值

Angular2 - Update values on select box change

angular2-forms

angular