2016-07-21 6 views
3

개체에 값을 바인딩 할 선택 컨트롤을 만들고 변경하려고하면 선택한 개체에 액세스 할 수 있습니다.각도 2 RC4 - 선택 ngModel 지연된 업데이트

나는 이것이 사용자 오류 또는 버그 또는 가능하지 않은지 확실하지 않은 양식에 많은 변경 사항이 있음을 알고 있습니다. 지금까지 어디에 있어요 여기

이다 : 나는 일이하고 싶은 무엇 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에 바인딩 된 속성을 통해 선택한 값에 액세스 할 수 있습니다.

//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의 지연이 버그입니까?

도움이 될 것입니다.

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

을 다음 모델은 올바르게 속성에 적용됩니다

답변

2

당신은 다음과 같은 선택 입력/출력을 정의해야합니다. ngModel 및 ngModelChange의 정의로 주문해야한다는 http://plnkr.co/edit/JGgflTY9LvrDDhqqlSGP?p=preview

주의 예이다 : 그래서 좀 더 주위를 연주 ...

+0

가 완전히 ... 내 응용 프로그램에 그것을 시도 작동하고 작동하지 않았다. 문제는 ngModel 및 ngModelChange의 순서입니다. '(ngModelChange) = "onChange()"[(ngModel)] = "선택한"은 작동하지 않습니다. 'onChange()'함수는 ngModel이 업데이트되기 전에 호출됩니다. 이것은 내가 그것을 다시 바꿀 때 항상 내가 그것을보고있는 것을보고 있었던 이유 다. 이 문제에 대한 메모로 답변을 업데이트 해 주시겠습니까? 또한 Angular Repo에 문제를 던질 예정입니다. 버그가 아니라면 분명히 어딘가에 문서화해야합니다. – ljaustin

+0

이미 알려진 문제인 것처럼 보입니다. 이 stackoverflow 문제에 추가 할 것입니다. https://github.com/angular/angular/issues/3406 – ljaustin

관련 문제