Angular2 - 구성 요소에서 선택 템플릿을 업데이트하십시오.

Question

구성 요소 템플릿에서 selectEmp 모델을 연결하는 select 요소가 있습니다. 구성 요소에서 selectedEmp를 업데이트하고 select 요소에 올바른 값이 표시되도록하고 싶습니다. 현재 설정으로 인해 이런 일이 발생하지 않습니다. 대신 선택 값은 selectedEmp를 표시하지 않습니다. 콘솔에 selectedEmp가 기록되었으며 값이 변경됩니다. 나는 그것이 구성 요소를 통해 할 때 옵션 요소가 어떤 값으로 설정되지 않기 때문에 이것이라고 생각합니다. 누구든지이 일을 할 수있는 방법을 알고 있습니까?

Component.html

 <select name="sel1" class="form-control" (ngModelChange)="onChange($event.target.value)" [(ngModel)]="selectedEmp"> 
      <option [value]="employee" *ngFor="let employee of employees"> 
       {{employee}} 
      </option> 
     </select> 

Component.ts

employees:Array<string> = ["Andrew","Allen","Kevin","Phil"]; 
visable:boolean = false; 
selectedEmp:any = null; 
constructor(){} 
// Selection change 
onChange(value:any):void { 
    console.log(value); 
} 
updateModel(){ 
    this.selectedEmp = "Allen" 
} 

Answer 1

그것의 꽤 귀하의 질문에 분명하지만, $event.target.value fails 항목이 문자열이기 때문에, 당신의 (ngModelChange) 이벤트가 바인딩에 하나의 오류를 참조했다 시도 (ngModelChange)="onChange($event)".

는하지만 그 때문에 잎 제거, 어쨌든 전용 콘솔이었다

<button type="button" (click)="updateModel()">Select Allen</button> 

<select name="sel1" [(ngModel)]="selectedEmp"> 
     <option [value]="employee" *ngFor="let employee of employees"> 
      {{employee}} 
     </option> 
</select>