Angular, PrimeNG upgrades cause errors in p-table

[kvea2git]

I have an SPA Angular/PrimeNG app that built and ran correctly, served up statically by Spring Boot, backed by a REST server and Keycloak for auth. It used Angular 12.2.3 and PrimeNG 12.1.1. I uninstalled my old Node.js, installed 20.13.1, installed Angular 17.3.0 and PrimeNG 17.16.1, created a new Angular workspace, and copied in the old project. Npm reported no errors with the installs. But ng build reports errors with p-table, as follows, code excerpt and error.

<p-table [value]="releases" responsiveLayout="scroll" [paginator]="true" [rows]="pageRows" dataKey="index" (onRowSelect)="onRowSelect($event)" selectionMode="single" [(selection)]="selectedRelease" [resizableColumns]="true">

<ng-template pTemplate="header"> <tr> <th [pSortableColumn]="poNumber" pResizableColumn>PO Number<p-sortIcon [field]="poNumber"></p-sortIcon></th>

The value="releases" refers to

export class ReleaseData { public poNumber: string; ...

This produces

`
[ERROR] NG9: Property 'poNumber' does not exist on type 'ReleasesComponent'. [plugin angular-compiler]

projects/kveconnect-ng/src/app/releases/releases.component.html:26:29:
  26 │       <th [pSortableColumn]="poNumber" pResizableColumn>PO Number<...

`

This worked before the upgrade. Angular somehow misses the membership of poNumber in the ReleaseData, thinks it should be in the component. Thanks for any comments.

[kvea2git]

The solution is

<p-table value="releases" let-column...>

and

<th [pSortableColumn]="column.poNumber" pResizableColumn>PO Number<p-sortIcon [field]="column.poNumber">

This at least suppresses the build error, presumably it will also run. The PrimeNG p-tablel doc needs to be corrected.