使用 PrimeNG table 过滤文本框中的数据后出现编译时错误

Question

我在Angular 12 版本 中创建了一个项目。然后我在我的项目中安装了最新版本 (11.4.5) 的 PrimeNG 控件。现在我已经创建了一个页面来使用具有排序和过滤功能的 PrimeNG Table。 在 header 下面我还有一行包含用于过滤数据的文本框。

现在我想要，每当我在文本框中输入任何值时，table 行将自动被过滤。我不想在文本框中输入任何值后使用 enter 进行过滤。但是我遇到了一些编译错误。

HTML 文件:

<p-table #dt1 [columns]="cols" [value]="products" dataKey="id" styleClass="p-datatable-gridlines p-datatable-striped"
    [paginator]="true" [rows]="5" [showCurrentPageReport]="true"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5,10,20]">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
                {{col.header}}
                <p-sortIcon field="{{col.field}}"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <p-columnFilter *ngSwitchCase="'name'" type="text" field="name" matchMode="contains" [ngModel]="value"
                    (input)="dt1.filter($event.target.value)">
                </p-columnFilter>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

TS 文件:

import { Component, OnInit } from '@angular/core';
import { Product } from '../_models/product.model';
import { ProductService } from '../_services/product.service';

@Component({
  selector: 'app-dynamic-grid',
  templateUrl: './dynamic-grid.component.html',
  styleUrls: ['./dynamic-grid.component.css']
})
export class DynamicGridComponent implements OnInit {
  products: Product[] = [];
  cols: any[] = [];

  value:any = null;

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.productService.getProductsSmall().then(data => this.products = data);

    this.cols = [
      { field: 'code', header: 'Code' },
      { field: 'name', header: 'Name' },
      { field: 'category', header: 'Category' },
      { field: 'quantity', header: 'Quantity' }
    ];
  }
}

型号：

export interface Product {
    id?: string;
    code?: string;
    name?: string;
    description?: string;
    price?: number;
    quantity?: number;
    inventoryStatus?: string;
    category?: string;
    image?: string;
    rating?: number;
}

编译错误为：

Error: src/app/dynamic-grid/dynamic-grid.component.html:19:40 - error TS2339: Property 'value' does not exist on type 'EventTarget'.

19 (input)="dt1.filter($event.target.value)"> ~~~~~

src/app/dynamic-grid/dynamic-grid.component.ts:7:16 7 templateUrl: './dynamic-grid.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DynamicGridComponent.

Error: src/app/dynamic-grid/dynamic-grid.component.html:19:40 - error TS2531: Object is possibly 'null'.

19 (input)="dt1.filter($event.target.value)"> ~~~~~

src/app/dynamic-grid/dynamic-grid.component.ts:7:16 7 templateUrl: './dynamic-grid.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DynamicGridComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

谁能帮我解决这个问题？

Answer 1

在 tsconfig.json 中启用 strictTemplate 时出现此错误。

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

不建议禁用tsconfig.json中的设置。

解决方案

您可以编写一个自定义过滤器 applyFilter，它接收 $event、field 和 matchMode 参数。

.component.html

<p-columnFilter *ngSwitchCase="'name'" type="text" field="name" matchMode="contains"
  (input)="applyFilter($event, 'name', 'contains')">
</p-columnFilter>

.component.ts

import { ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@ViewChild('dt1') dt!: Table;

applyFilter($event: any, field: string, matchMode: string) {
  let value = ($event.target as HTMLInputElement)?.value;
  this.dt.filter(value, field, matchMode);
}

Sample Solution on StackBlitz

使用 PrimeNG table 过滤文本框中的数据后出现编译时错误

Compile time error after using PrimeNG table for filtering data in textbox

typescript

primeng

angular

primeng-datatable

解决方案