ngPipeInstance changes data and cause error when going back to previous page

[erlingegelund]

:beetle: bug report

Using ngPipeInstance, the pipe fails when going back to previous page, causing the whole page to fail

:microscope: Minimal Reproduction

StackBlitz/GitHub Link: https://github.com/erlingegelund/ng-datatables-datepipe

Step-by-step Instructions:

1. Start application: ng serve --open
2. Navigate to page 2
3. Navigate to page 1

:8ball: Expected behavior

Being able to go back and forth through the pages without errors

:camera: Screenshots

:globe_with_meridians: Your Environment

• NodeJS version: v16.20.0
• Angular version: 14.3.0
• Angular CLI version: 14.2.11
• jQuery version: 3.6.4
• DataTables version: 1.13.4
• angular-datatables version: 14.0.2

:memo: Additional context

[sune-j]

I have the same issue. It seems that the result from ngPipeInstance overwrites data.

Example pipe:

transform(data: State): string {
  if (data === State.OK) {
    return 'OK';
  } else {
    return 'NOT OK'
  }
}

If State.OK is passed, the string 'OK' will be returned, but when you change page and go back to this page, data is now the string 'OK' and will return 'NOT OK'.

[nymkappa]

I also confirm the issue.

The bug can be reproduced in the live example at https://l-lin.github.io/angular-datatables/#/advanced/using-pipe. If you try to re-order rows, the error while be thrown in the console.

[nymkappa]

As a temporary workaround, you can use the createdCell callback from datatable, eg:

createdCell: (cell: Node, cellData: any, rowData: any, row: number, col: number) => {
   // this.number is injected in the constructor through "private number: DecimalPipe"
   $(cell).html(this.number.transform(cellData));
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.