Virtual scroll official examples for treepanel generating ExpressionChangedAfterItHasBeenCheckedError

Question

I am attempting to get virtual scroll working for the TreeTable, and after following the official examples I am getting ExpressionChangedAfterItHasBeenCheckedError when iI expand any of the nodes for my data.

When trying the official demo's with Stackblitz I see the errors are also generated here too, this is happening for both primeng v9 and v10 latest demo examples.

I noticed a GitHub issue has been raised for this also here - https://github.com/primefaces/primeng/issues/8886 but was closed with a workaround referenced to add a ChangeDetectorRef and trigger a change detection cycle manually.

I tried this solution with the official stackblitz demo's (https://stackblitz.com/edit/primeng-treetablescroll-demo?file=src%2Fapp%2Fapp.component.ts)

setTimeout(() => {
    this.virtualFiles = Array.from({length: 1000}).map((_,i) => this.createNode(i, 100));
    this.cd.detectChanges();
}, 2000);

But it makes no difference, the error is still generated, perhaps I am implementing this incorrectly?

To replicate the issue, you just have to expand one of the nodes displayed in the virtual scroll example.

I am particularly interested in a solution\workaround for primeng 9

Are you able to reproduce the problem or at least share the steps to reproduce? — Owen Kelvin, Oct 22 '20 at 16:08
@OwenKelvin - yeah sorry I should have been more specific about replicable steps, I have just added how to at the end of my original question - To replicate the issue, you just have to expand one of the nodes displayed in the virtual scroll example — mindparse, Oct 22 '20 at 16:59

Akash · Answer 1 · 2020-10-26T08:29:05.140

1

Update:

Some workarounds you can try -

Option 1

Change virtualRowHeight to auto - [virtualRowHeight]="auto". But this will really impact the performance of expand/collapse toggle.

Option 2

Use ChangeDetectionStrategy.OnPush strategy on your component. But be careful of its side effects (read this to know how it works). Please see this stackBlitz.

Original answer:

This issue has been fixed in the version 10.0.3. If you're curious, take a look at this commit which fixes this issue.

Also, checkout this forked stackBlitz. It works without any workaround.

edited Oct 26 '20 at 08:29

answered Oct 22 '20 at 16:42

Akash

4,412
4
30
48

It does not work, expand one of the nodes in the virtual scroll example and you will get that error – mindparse Oct 22 '20 at 16:52
That's because the installed dependencies on my forked app still shows `10.0.0`, not sure why. Did you try using `10.0.3` version in your app? – Akash Oct 22 '20 at 17:02
Please checkout again. I forgot to install and click on save - https://stackblitz.com/edit/primeng-treetablescroll-demo-iwqext?file=package.json – Akash Oct 22 '20 at 17:09
Ok, I see now yes thanks. I am trying to get this working for a v9 app in particular, cant migrate to 10 just yet because of 'reasons' – mindparse Oct 22 '20 at 17:11
I see.. don't know why your example was using `"primeng": "^10.0.0",` – Akash Oct 22 '20 at 17:13

score 1 · Answer 2 · answered Oct 24 '20 at 06:47

As mentioned by Akash, issue has been fixed in later version of the library and you check the changes attached with BUG you mentioned and can apply the fix in your code as well:

app.component.html

...
<p-treeTable #treeTable [value]="virtualFiles" [columns]="cols" [scrollable]="true
  [rows]="100">
  ...
</p-treeTable>

app.component.ts

...
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit, OnDestroy { 
    @ViewChild(TreeTable)
    private virtualTable: TreeTable;

    virtualFiles: TreeNode[];
    cols: any[];
  
    private virtualTableSub: Subscription;

    constructor(
        private nodeService: NodeService,
        private primengConfig: PrimeNGConfig,
        private cdr: ChangeDetectorRef
    ) { }
    ...
    ngAfterViewInit() {
      this.virtualTable.tableService.uiUpdateSource$.subscribe(() => {
        if (this.virtualTable.virtualScroll) {
          this.cdr.detectChanges();
        }
      })
    }

    ngOnDestroy() {
      this.virtualTableSub?.unsubscribe();
    }
    ...
}

Take a look at this stackblitz.

Virtual scroll official examples for treepanel generating ExpressionChangedAfterItHasBeenCheckedError

2 Answers2