javascript - 清除 Angular2 中的输入文本字段

Question

为什么当我尝试清除文本字段时此方法不起作用？

<div>
      <input type="text" placeholder="Search..." [value]="searchValue">
      <button (click)="clearSearch()">Clear</button>
</div>


export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = '';
  }
}

我期待的是:因为我正在传递搜索值的属性，所以当我单击按钮时，它应该获得在 clearSearch() 函数中处理的更新值。

我还注意到，如果我将默认值设置为 searchValue，clearSearch() 函数会起作用，但只有一次。

请check my plunker .

Answer 1

1。第一种方法

你必须在这里分配 null 或空字符串

this.searchValue = null;
//or
this.searchValue = ' ';

Working Plunker

因为 Angular 变化检测没有触发任何事件。所以你必须分配一些值 null 或带空格的字符串

2。第二种方法

• 使用 [(ngModel)] 它应该与 ngModel 一起使用。

why ?

因为您使用 value 属性进行绑定(bind)，这只是属性绑定(bind)而不是事件绑定(bind)。所以angular 不运行变更检测，因为没有触发与 Angular 相关的事件。如果你绑定(bind)到一个事件，那么 Angular 会运行变化检测，并且绑定(bind)有效并且值应该发生变化。

查看与 ngModel 相同的工作示例

Working Example with ngModel