Angular2-更新组件中的选择模板

Question

我的组件模板中有一个selected模型，它连接了selectedEmp模型。我希望能够更新组件中的selectedEmp并在select元素中显示正确的值。 我当前的设置不会让这种情况发生。 相反，选择值不显示selectedEmp。 我在控制台上记录了selectedEmp，它的值正在更改。 我认为这是因为通过组件执行操作时，option元素从未设置为任何值。 有谁知道做到这一点的方法。

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

从您的问题中还不清楚，但是我确实在您的(ngModelChange)事件绑定上看到一个错误，因为这些项是字符串，所以$event.target.value fails try (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>