angularjs - Angular 2 RC4 - Select ngModel delayed update -


i'm trying create select control bind value object , on change can access selected object.

i know there has been lot of changes in forms not sure if user error or bug or not possible.

here i'm @ far: link plunker

import { component } '@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);   } } 

what have happen when onchange event called either pass object value of selected item method or access selected value through property bound in ngmodel.

//expected onchange(event) {   console.log(event.target.value) // selected object bound ngvalue   console.log(this.selected) // ngmodel updated object bound selected option  } 

but unfortunately, event.target.value string version of object , this.selected sort of works behind on being updated.

is there way or proper way handle this? delay in ngmodel bug?

any appreciated!

you should define select inputs/outputs following:

<select [(ngmodel)]="selected" (ngmodelchange)="onchange()">   <option *ngfor="let d of data" [ngvalue]="d">     {{d.name}}   </option> </select> 

and model correctly applied property. http://plnkr.co/edit/jggflty9lvrddhqqlsgp?p=preview

notice definition of ngmodel , ngmodelchange should ordered in example :)


Comments