选择选项时角度 4 选择元素行为的问题答案

【问题标题】：An issue with angular 4 select element behavior on selecting an option选择选项时角度 4 选择元素行为的问题
【发布时间】：2018-02-19 08:17:35
【问题描述】：

我正在构建一个 Angular 4 (v4.2.5 cli) 应用程序，我遇到了以下问题：

我以下列方式使用选择元素：

<div class="col-xs-8">
    <select class="col-xs-12" [(ngModel)]="roleId" (ngModelChange)="changeSelected($event)">
        <option *ngFor="let type of userTypes" [ngValue]="type" [selected]="type.Name === role">{{ type.Name }}</option>
    </select>
</div>

本质上，我想将选择事件绑定到我的组件类中的特定操作：

changeSelected(event) {
    this.roleId = event.ID;
}

它起作用了，当我选择其中一个选项时，事件被触发并且“roleId”字段被设置。但是，所选项目只是从视图中消失（我保留一个空选项）。我正在用 chrome 测试我的解决方案。 [ngValue] 属性绑定是否会以某种方式干扰 [selected] 属性绑定？我错过了什么吗？提前感谢您的帮助。

【问题讨论】：

使用ngModel的时候不用selected
你要么使用[(ngModel)]="..."或[ngModel]="..." (ngModelChange)="..."，不要将两者混用。
是的，但是 *ngFor 循环的数据来自服务器，当我想编辑特定用户时，我希望在用户编辑模式框打开时显示适当的选项字段（ select 元素包含在其中，输入字段由来自服务器的数据通过 [(ngModel)] 绑定预先填充。那么如何在仍订阅 changeSelected 事件的同时实现这一点？
jonrsharpe 非常感谢，就是这样。当然，[(ngModel)] 是双向绑定。

标签： angular typescript

【解决方案1】：

当你想改变一个选择的值时，你不需要为此触发一个事件。只需删除您的ngModelChange 属性，您的roleId 属性将具有您以任何方式选择的值。

【讨论】：

【解决方案2】：

您可以使用[(ngModel)]="..." 或[ngModel]="..." (ngModelChange)="..."，不要将两者混用。再次感谢 jonrsharpe。

【讨论】：