Angular 2单向绑定删除select标签的选定选项

Question

我在test.component.html文件中有这段代码：

<select class="form-control input-sm">
    <option value="" disabled selected>Supplier</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

它显示得很漂亮：

出于某种原因，当我将模板中的单向绑定添加到该选择标记上的Component时，所选选项将消失：

<select (ngModel)="item.supplier" class="form-control input-sm">
    <option value="" disabled selected>Supplier</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

是什么导致这种情况发生以及如何解决？

Answer 1

我认为它正在消失，因为您绑定了output的{​​{1}}事件，但实际上没有使用ngModelChange提供的值。

这应该对你有用（注意我假设在组件中已经初始化了一个项目对象）。

$event

这分别在输入和输出绑定中使用 <select [ngModel]="''" (ngModelChange)="item.supplier = $event" class="form-control input-sm"> <option value="" disabled selected>Supplier</option> <option>Option 1</option> <option>Option 2</option> </select> ，而不是双向绑定ngModel - 请参阅here。