[Table] Http example has ExpressionChangedAfterItHasBeenCheckedError

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

[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

[bfwg]

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