PrimeNG 表 filterGlobal TS2339：类型“EventTarget”上不存在属性“value”

Question

我为 PrimeNG 找到的所有示例都p-table显示了以下用于过滤表的示例。

<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Filter" />

当我使用它时，我收到一个编译错误。

error TS2339: Property 'value' does not exist on type 'EventTarget'.

注意：我确实打开了严格模式。

Answer 1

你的 HTML 输入应该是这样的

<input pInputText type="text" (input)="applyFilterGlobal($event, 'contains')" placeholder="Filter" />

在你的 TS 中这样做

import { Table } from 'primeng/table'
...
applyFilterGlobal($event: any, stringVal: any) {
    this.dt!.filterGlobal(($event.target as HTMLInputElement).value, stringVal);
  }

如果您收到 dt 错误，请添加以下行

  @ViewChild('dt') dt: Table | undefined;

Answer 2

首先尝试将目标解析为 HTMLInputElement：

<input pInputText type="text" (input)="applyFilterGlobal($event, 'contains')" placeholder="Filter" />

并在您的组件中：

applyFilterGlobal($event, stringVal) {
  this.dt.filterGlobal(($event.target as HTMLInputElement).value, 'contains');
}

event.target 是一个 HTMLElement，因为你在严格模式下，而 HTMLElement 没有 value 属性，编译引擎抛出错误，将目标更改为 HTMLInputElement 解决它

Answer 3

<input pInputText #textInput type="text(input)="tt.filterGlobal(textInput.value, 'contains')" placeholder="Filter" />

添加#textInput到标签对我有用。

Answer 4

相反，遵循代码，

<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search" />`

尝试跟随。这对我有用。

<input pInputText type="text" (input)="dt.filterGlobal($any($event.target).value, 'contains')" placeholder="Global Search" />`

我为 $event.target 添加了“$any”。