时间戳

首页 > 解决方案 > 如何在 Angular.io 中通过单击按钮更改输入值并触发输入事件

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

问题描述

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

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

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

但是如果没有问题，我怎样才能从按钮的点击事件中触发触发器呢？如果我绝对必须这样做，我可以这样做：

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

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

标签： angular

解决方案

只有当(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>

这是您参考的工作 StackBlitz 示例。

推荐阅读