Components: [Table] Http example has ExpressionChangedAfterItHasBeenCheckedError

[fabulias]

Bug, feature request, or proposal:

When I load this example I obtain an error in my browser, but I intent access to variable that is undefined.

TableHttpExample.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.

What are the steps to reproduce?

https://github.com/angular/material2/tree/master/src/material-examples/table-http

What is the use-case or motivation for changing an existing behavior?

Delete this error, but I need use this table and when use with error I can't render my data

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Dependencies
"@angular/animations": "^4.3.1",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/flex-layout": "^2.0.0-beta.8",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"

Google Chrome:
Version 59.0.3071.115 (Official Build) (64-bit)

OS: macOS Sierra 10.12.4

[rafaelss95]

Should be solved by #5775.

[andrewseguin]

The issue here was caused by the loading div, not the table. The variables isLoadingResults and isRateLimitReached were initially undefined but changed to false during connect which is no good since it was done during change detection.

Initializing them to false fixes the issue. See this plunker for a working example:
https://plnkr.co/edit/pSQHjWgs5uYRMVIKk2J9?p=preview

[fabulias]

@andrewseguin this isn't solution, I add the initial values and error remains.

[andrewseguin]

@fabulias Try updating to the latest build on master

npm install --save angular/material2-builds angular/cdk-builds

Some optimizations were made to the table's change detection routine that may solve your issue.

If that doesn't fix it, then it's likely related to something in your code. If you need more help, try posting your question on StackOverflow with your code to see if someone can help troubleshoot your issue.

[TejasCMehta]

Just for a quick solution, I did as below:
Instead of

this.isRateLimitReached = true;

changed to below line

setTimeout(() => {
          this.isRateLimitReached = true;
  });

and for isLoadingResults

 setTimeout(() => {
          this.isLoadingResults = true;
  });

If anyone has another solution then please share.

Cheers!!

[mikejohanson]

Thanks @TejasCMehta , it's not the most elegant but it works! I forked @andrewseguin's plunk and it seems to have resolved the issue there as well. https://plnkr.co/edit/6OXCjJ?p=preview

[bfwg]

I'm still having this issue in version 5.0.1. setTimeout does work, but is there a better way to handle this?

[bfwg]

Change to [hidden]="!dataSource.isLoadingResults" seems to fix the issue.
Reference: https://github.com/angular/angular/issues/17572

[Splaktar]

Unfortunately, this was not fixed by https://github.com/angular/material2/pull/5775 as that fixed the table, not the docs.

The docs still need to be updated to include an example that doesn't throw this exception, otherwise developers will copy the example and keep running into this error. Current docs Stackblitz with repro (note that I had to fix the HttpClient errors - a PR is already open with that fix).

[Splaktar]

This Stackblitz example seems to fix the issue for the docs without the need for setTimeout() or detectChanges().

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}