CODEWITHSUNDEEP
angulartypescriptprimengangular11primeng-datatable
Lakshmi
Lakshmi

Reputation: 2294

Property 'value' does not exist on type 'FilterMetadata' on primeng table

I am migrating a module from primeng 7 to primeng11 along with angular11 the code runs perfectly fine on ng serve the functionalities are working too but on build I am getting a weird error

 error TS2339: Property 'value' does not exist on type 'FilterMetadata | FilterMetadata[]'.
  Property 'value' does not exist on type 'FilterMetadata'.

the error is for the below code

<input *ngIf='!col.noFilter' [style.width]="'98%'" [style.height]="'25px'" pInputText type="text"
                        [placeholder]="col.filterPlaceHolder ? col.filterPlaceHolder : ''" 
                        (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)" 
                        [value]="dt.filters[col.field]?.value" />

I have verified the primeng FilterMetaData interface and it has the property value like below

export interface FilterMetadata {
    value?: any;
    matchMode?: string;
    operator?: string;
}

the code syntax is fine i have veriified the same on primeng page docuemntation https://www.primefaces.org/primeng/showcase/#/table

Please kindly help not sure why ng serve has no ssues but build is failing. My node version is node v10.23.0

Upvotes: 7

Views: 5785

Answers (3)

Sampath
Sampath

Reputation: 65870

Angular/PrimeNg: 12+

This works for me:

Note: You can see the $any usage here.

 <input pInputText type="text" (input)="dt.filter($any($event.target)?.value, 'name', 'contains')"
 [value]="$any(dt.filters['name'])?.value" placeholder="Search by Name" class="p-column-filter">

Ref: https://github.com/angular/angular/issues/35293#issuecomment-584293328

Upvotes: 12

Ernesto Vazquez
Ernesto Vazquez

Reputation: 141

try replacing this line

[value]="dt.filters[col.field]?.value

with this other

[value]="$any(dt).filters[col.field]?.value"

I hope it works for you

Upvotes: 0

Zam Abdul Vahid
Zam Abdul Vahid

Reputation: 2721

There is a typo in your syntax. I hope you are using the global search functionality and the syntax should be (input)="dt.filterGlobal()" instead of (input)="dt.filter()".

<input *ngIf='!col.noFilter' [style.width]="'98%'" [style.height]="'25px'" pInputText type="text" [placeholder]="col.filterPlaceHolder ? col.filterPlaceHolder : ''" (input)="dt.filterGlobal($event.target.value, col.field, col.filterMatchMode) />

Upvotes: -1

Related Questions