用于过滤的输入字段对按钮单击输入没有反应

Question

因此，我将 angular 与带有过滤选项的 kendo 网格一起使用。要过滤，必须在输入字段中写一些东西。但我希望用户能够点击一个按钮，该按钮会自动用一些文本填充输入字段。

 <ng-template kendoGridToolbarTemplate>
        <input placeholder="Filter"  (input)="onFilter($event.target.value)" id="filter" value="" type="textbox" />
 </ng-template>

因此，当用户单击某个按钮时，它会在输入字段中填充如下文本：

(<HTMLInputElement>document.getElementById("Filter")).value= "New York";

输入字段已填充此文本，但未进行过滤。另一方面，当我手动填写输入字段时，它正在过滤。好像是什么问题？

Answer 1

change/input 事件未被触发，因为您以编程方式更新了输入。您可以使用 CustomEvent 告诉听众某些内容已更改。

例子

Html:

<input placeholder="Filter"  (input)="onFilter($event.target)" id="filter" value="" type="textbox" />
<button (click)="buttonClick()">Click</button>

TS:

   buttonClick() {
     const inputElement = <HTMLInputElement>document.getElementById("filter")
     inputElement.value = "New York"

     const evt = new CustomEvent("input")
     inputElement.dispatchEvent(evt)
  }

  onFilter(ev) {
    console.log("click - ", ev.value)
  }

用于过滤的输入字段对按钮单击输入没有反应

Input field for filtering does not react to button-click input

html

javascript

typescript

kendo-grid

angular