angular - 每次更改后从选择元素中清除所选值

Question

我有下拉和文本字段。从下拉列表中选择的值显示在文本字段中。现在我想清除选定的值，即；在下拉菜单上显示为空，但第一次它清除并且休息时它不起作用。

演示

我只想在每个选择的下拉列表中显示空白

标签： angular

Answer 1

您可以通过在重置绑定值之前强制更改检测来使您的代码正常工作。这可能确保select在我们将元素设置为空值之前处理元素中所做的更改。看到这个 stackblitz。

logNoteSelectionChange(obj) {
  this.Otherlogs = obj;
  this.changeDetectorRef.detectChanges();
  this.selectedLog = '';
}

---

或者，您可以删除元素[(ngModel)]上的数据绑定：select

<select #select ngModel (ngModelChange)="logNoteSelectionChange(select, $event)">
  <option *ngFor="let log of logCol">
    {{log.logMessage}}
  </option>
</select>

并重置(ngModelChange)事件处理程序中的选定值：

logNoteSelectionChange(select: HTMLSelectElement, obj: string) {
  this.Otherlogs = obj;
  select.value = "";
}

请参阅此 stackblitz以获取演示。