Question

我正在尝试让一个按钮清除Angular 6中的文本输入元素。

<input #gf type="text" (input)="dt.filterGlobal($event.target.value, 'contains')">
<button (click)="gf.value = '';"></button>

在上面的标记中，我有一个文本类型的输入，当将数据输入到输入中时，该输入将调用filterGlobal方法。在该按钮下面是一个按钮，单击该按钮可清除输入值。当单击clicke时，文本将从输入中消失，但不会触发输入元素的输入事件，因此不会调用filterGlobal方法。那里有什么问题吗？我认为更改模型的值会导致输入事件被触发。

但是，如果没有任何问题，该如何从按钮的click事件中触发触发器？如果绝对必须，我可以这样做：

<button (click)="gf.value = ''; dt.filterGlobal($event.target.value, 'contains')"></button>

但是现在我正在复制代码，如果有人更改了输入事件处理程序而不更新点击事件处理程序...

Answer 1

使用(input)，仅当您在文本框中输入内容时，函数才会被调用。单击按钮，输入值将更改。但这不是用户在文本字段上输入的结果。因此，您的函数将不会被调用。

如果您希望在这种情况下调用函数，我认为您应该绑定到(change)事件。每当输入字段发生更改，而您blur从中进行更改时，都会调用此方法。

但是，如果先从输入字段中模糊然后单击按钮，那将不起作用。

为了使其在这种情况下也能正常工作，请考虑在进行dt.filterGlobal之前先用gf.value而不是gf.value来调用$event.target.value。

<input 
  #gf 
  type="text" 
  (input)="dt.filterGlobal($event.target.value, 'contains')">

<button 
  (click)="dt.filterGlobal(gf.value, 'contains'); gf.value = '';">
  Clear
</button>

这是您推荐的Working StackBlitz Sample。

如何在Angular.io中更改按钮单击的输入值并触发输入事件

1 个答案: