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

【问题标题】：PrimeNG Table filterGlobal TS2339: Property 'value' does not exist on type 'EventTarget'PrimeNG 表 filterGlobal TS2339：“EventTarget”类型上不存在属性“值”
【发布时间】：2021-01-02 06:31:49
【问题描述】：

我为 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'.

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

【问题讨论】：

标签： angular primeng

【解决方案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属性，编译引擎会报错，把target改成HTMLInputElement解决了

【讨论】：

我遗漏了其他一些部分，延迟加载等...现在可以使用了。不编译阻止了我进入其他部分。谢谢！
可能最好将stringVal 传递给filterGlobal() 以便在页面中定义运算符并传递。

【解决方案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;

【讨论】：

按照上面的答案对我有用 - applyFilterGlobal($event: any, stringVal: any) { this.dt?.filterGlobal(($event.target as HTMLInputElement).value, 'contains '); }
import { Table } from 'primeng/table';

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

在您的 HTML 代码中应用上述函数。

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

【讨论】：

【解决方案5】：

另一种选择是在输入标签中使用Angular Template Reference。

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

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

【讨论】：

【解决方案6】：

扩展以前的答案，这对我有用：

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

其中 table 是您在表中的#table 引用，例如<p-table #table ...>。那么：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：