angularjs - Angular 2 RC4 - 选择 ngModel 延迟更新

Question

我正在尝试创建一个选择控件，它将值绑定(bind)到一个对象，并且在更改时我可以访问所选对象。

我知道表格有很多变化，所以不确定这是否是用户错误或错误，或者不可能。

这是我目前所在的位置:Link to Plunker

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
       <h1>My First Angular 2 App</h1>
       <select (change)="onChange($event)" [(ngModel)]="selected">
          <option value=''></option>
          <option *ngFor="let d of data" [ngValue]="d">
             {{d.name}}
          </option>
       </select>
   `
})
export class AppComponent { 
  diagnostic;
  selected;
  data = [
     { id: 1 , name: 'query 1', filters: [
        { 'filter1': 'material = 1'},
        {'filter2': 'plant = 2'}
       ]
     },
     { id: 2 , name: 'query 2', filters: [
        { 'filter1': 'material = 1'},
        {'filter2': 'plant = 2'}
        ]
     }
  ];

   onChange(event) {
      console.log(event.target.value);
      console.log(this.selected);
  }
}

我希望发生的是，当调用 onChange 事件时，我要么将所选项目的对象值传递给该方法，要么通过 ngModel 中绑定(bind)的属性访问所选值。

//expected
onChange(event) {
  console.log(event.target.value) // selected object bound to ngValue
  console.log(this.selected) // ngModel updated to object bound to selected option 
}

但不幸的是，event.target.value是对象的字符串版本，this.selected有点工作，但总是落后于更新。

有没有其他方法或正确的方法来处理这个问题？ ngModel 中的延迟是错误吗？

如有任何帮助，我们将不胜感激!

Answer 1

您应该按如下方式定义选择输入/输出:

<select [(ngModel)]="selected" (ngModelChange)="onChange()">
  <option *ngFor="let d of data" [ngValue]="d">
    {{d.name}}
  </option>
</select>

然后模型被正确地应用于属性。 http://plnkr.co/edit/JGgflTY9LvrDDhqqlSGP?p=preview

请注意，ngModel 和 ngModelChange 的定义应按示例中的顺序排序:)