Question

我的组件模板中有一个select元素，它连接了一个selectedEmp模型。我希望能够更新组件中的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

您的问题并不十分清楚，但我确实在您的(ngModelChange)事件绑定中看到了一个错误，因为这些项目是字符串，$event.target.value fails尝试(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>

Angular2 - 从组件更新选择模板

1 个答案: