如何使用Angular 2重置文本框

Question

我想通过Angular 2方法重置文本框。我尝试了以下代码，但它不起作用。

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

Answer 1

没有任何代码示例，这应该有效：

in 模板：

<input type="text" #myinput />
<button (click)="clear(myinput)">Clear</button>

in 组件：

clear(input: HTMLInputElement){
  input.value = ''; // null should work too, but as the type ov the value is string I like to use ''
}

Answer 2

假设this.search_value是组件内包含的变量，并且假设模板中的输入和清除按钮已设置为：

<input type="text" [(ngModel)]="search_value" />
<button (click)="clear()">X</button>

然后在组件中，您需要创建一个并行方法，该方法执行清晰的函数：

clear() {
   this.search_value = ''
}

this.search_value = ''本身没有意义。它需要首先绑定或"绑定"到您的模板(请注意，我使用了NGModel指令来执行此操作(。然后，您需要一个函数(在这种情况下，单击指令的按钮(可以使用该组件变量进行您想要的操作。