Primeng: Lazy data table with a loading status indicated problem with Angular 4.2

[andrei-ivanov]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

Current behavior

Lazy data table with a loading status indicator, just as in the showcase, triggers an error after upgrading to Angular 4.2.0:

error-handler.ts:13 Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
at viewDebugError (core.es5.js:8507)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8485)
at checkBindingNoChanges (core.es5.js:8649)
at checkNoChangesNodeInline (core.es5.js:12518)
at checkNoChangesNode (core.es5.js:12476)
at debugCheckNoChangesNode (core.es5.js:13251)
at debugCheckDirectivesFn (core.es5.js:13153)
at Object.eval [as updateDirectives] (ShipmentsComponent.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13135)
at checkNoChangesView (core.es5.js:12296)

Removing the [loading] attribute make the error go away.

Expected behavior
No error

Minimal reproduction of the problem with instructions
Use a lazy loaded data table with a loading status indicator, just as in the showcase, and upgrade Angular from 4.1.3 to 4.2.0 to trigger to issue.

What is the motivation / use case for changing the behavior?
I assume Angular has the correct behavior described somewhere and probably the data table component doesn't follow it and Angular 4.2.0 added extra checks.

Please tell us about your environment:

Angular 4.2.0, Angular Cli 1.1.1, ng serve

• Angular version: 4.2.0

• PrimeNG version: 4.0.3

• Browser: Chrome 59

• Language: [TypeScript 2.3 | ES5]

• Node (for AoT issues): node --version = 7.10.0

Could be a duplicate for #3041, though it mentions only Angular 4.1.3 while this is triggered by the upgrade to 4.2.0

[ryancui-]

Same issue with Angular 4.2.2

But Oddly, I have two pages with nearly the same structure(HTML, typescript), one page have this error, while another have not, really puzzle me...

By the way, after updating to Angular 4.2.2, many ExpressionChangedAfterItHasBeenCheckedError appear on different components, such as RadioButton. Maybe it's a universal problem and be better have them fixed, too.

yeah, just like #3100

[andrei-ivanov]

@cagataycivici This one too please :)
Actually, I assume a general compatibility test should be performed for Angular 4.2

[cagataycivici]

Angular 4.2.2 seems to breake some things.

[andrei-ivanov]

But... is it an Angular issue or Primeng?

[cagataycivici]

Can't replicate with Angular 4.2.4 so please provide a plunkr, thank you.

[cagataycivici]

@ryancui- radio issue is fixed;

https://github.com/primefaces/primeng/issues/2761

[ryancui-]

thx~

[ryancui-]

There's still problem with loading in dataTable.

I use [loading]=tableLoading, [lazy] and (onLazyLoad) in my dataTable, the code in onLazyLoad function is below:

this.tableLoading = true;
this.userService.list(query)
  .subscribe(data => {
    this.total = data.total;
    this.users = data.rows;
    this.tableLoading = false;
  }, () => {
    this.tableLoading = false;
  });

I found the onLazyLoad method would be called automatically, and I got an error in the console:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

When I remove the [loading]=tableLoading, everything works.

Are there something wrong? Or i don't understand the usage of loading? I think it may be related to Angular change detection.

thx a lot~

after i check the documentation, i found this will work:

setTimeout(() => {
  this.tableLoading = true;
  this.userService.list(query)
    .subscribe(data => {
      this.total = data.total;
      this.users = data.rows;
      this.tableLoading = false;
    }, () => {
      this.tableLoading = false;
    });
}, 0)

to notify Angular to start a change detection, but is it a workaround or a MUST?

[cagataycivici]

Is it possible to provide a plunkr? @Mrtcndkn can you please check this?

[ryancui-]

I tried...but visiting plunkr is too slow for me.

[andrei-ivanov]

That's why my request in #3266

[ryancui-]

After I read the source code of dataTable component, I can not understand why the onLazyLoad method is designed to be called automatically.

In some case, I don't want my table filled with data at the very beginning. (perhaps the table is in a dialog which may not be opened) Then the user press some button, for example, trigger the lazy load.

ngOnInit() {
    if(this.lazy) {
        this.onLazyLoad.emit(this.createLazyLoadMetadata());
    }
}

[Mrtcndkn]

I am also unable to replicate this problem.I need a plunkr to move on with the issue.

[andrei-ivanov]

@Mrtcndkn is there any chance to get #3266 fixed then? It might just be that we implement this feature incorrectly in our apps.

[bobbydowling]

Same problem here... any fix?

using latest of Ng and Prime, as of today...

[mpavi]

It happens after reload/load page fully (for example by F5)

[bobbydowling]

Never mind. I had an old Ng2-based package lying around that was tripping things up somehow.

That said, [Loading] causes the same issue still...

[bobbydowling]

Is this gonna get fixed?

[burhanyldz]

I can confirm that this issue is present in angular 4.2.4. I had to predefine the var loading as true so it doesn't show the error anymore. Something needs to be fixed still though.

export class ClassroomsComponent {
    dataArray: Classroom[] = [];
    loading = true; //-------------------------> this was false before
    path = "classrooms";

  constructor(
    public service: GenericService,
    ) {  }

  loadLazy(event){
    this.loading = true; //---------------------> now this doesn't change anything; so no errors
    this.service.set(this.path).getAll()
    .subscribe((data: any) => {
      this.dataArray = data.rows;
      this.loading = false;
    },
    err => {
      this.loading = false;
    });
  }
}

[andrei-ivanov]

I think it would be best if someone could manage to create a plunkr sample to reproduce it 😕

[burhanyldz]

@Mrtcndkn Here is plunkr
it seems we have the same issue with 4.2.6.

[csotomon]

@burhanyldz your solution works forked for me, but the loading icon is not showing.

[andrei-ivanov]

@cagataycivici Any chance you could take a look at the provided plunkr?

[mlakhara]

I am encountering this issue in unit tests but not in actual runtime. This is because of the fact that lazyLoad function is being called in ngOnInit of datatable which is called by Change Detector. As mentioned by @burhanyldz this goes away when initial value of loading is true

[cagataycivici]

Tracking at #3300