PrimeNG 表筛选器全局 TS2339：类型"事件目标"上不存在属性"值"

Question

我为PrimeNGp-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

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

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

并且在您的组件中：

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

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

Answer 2

您的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 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.

Answer 5

1. 在组件中编写一个函数，通过传递$event来检索$event的值

getEventValue($event:any) :string {
return $event.target.value;
} 

2. 在HTML代码中应用上述函数

<input pInputText type="text" (input)="dt1.filterGlobal(getEventValue($event), 'contains')" placeholder="Search keyword" />

Answer 6

另一个选项是在输入标记中使用角度模板引用。

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

上面的#textInput是对输入标签的引用，因此它具有值属性。

Answer 7

全局地告诉Angular不要通过禁用strictDomEventTypes:来检查DOM事件绑定的类型

{
"angularCompilerOptions": {
"strictTemplates": true
"strictDomEventTypes": false,
}
}

Answer 8

扩展前面的答案，这对我有效：

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

其中table是您在类似<p-table #table ...>的表中的#表引用。然后：

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

Answer 9

在HTML中使用此。

<input pInputText type="text" (input)="dt1.filterGlobal(applyFilterGlobal($event), 'contains')" placeholder="Search keyword" />

在TS文件中使用：

applyFilterGlobal(event: any) {
return event.target.value;
}

Answer 10

通过在模板上使用$any((解析目标。比如

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