Angular 2单向绑定删除选择标记的选择选项

Question

I have this code in my test.component.html file:

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

It shows up nice like this:

For some reason, when I add one-way binding from the template to the Component on that select tag the selected option disappears:

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

What is causing this to happen and how to fix it ?

Answer 1

I think it's disappearing because you're binding to the output event for ngModelChange but not actually using the value provided by the $event .

This should work for you (note I assume there's an item object already initialised in the component).

  <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>

This is using ngModel in the input and output bindings separately, rather than the two-way binding [(ngModel)] - see here .