@@ -21,7 +21,7 @@ import {
21
21
IterableChangeRecord ,
22
22
IterableDiffer ,
23
23
IterableDiffers ,
24
- NgIterable ,
24
+ NgIterable , NgZone ,
25
25
QueryList ,
26
26
Renderer2 ,
27
27
TrackByFunction ,
@@ -37,6 +37,7 @@ import {Subscription} from 'rxjs/Subscription';
37
37
import { Subject } from 'rxjs/Subject' ;
38
38
import { CdkCellDef , CdkColumnDef , CdkHeaderCellDef } from './cell' ;
39
39
import { getTableDuplicateColumnNameError , getTableUnknownColumnError } from './table-errors' ;
40
+ import { first } from '../rxjs/rx-operators' ;
40
41
41
42
/**
42
43
* Provides a handle for the table to grab the view container's ng-container to insert data rows.
@@ -151,6 +152,7 @@ export class CdkTable<T> implements CollectionViewer {
151
152
152
153
constructor ( private readonly _differs : IterableDiffers ,
153
154
private readonly _changeDetectorRef : ChangeDetectorRef ,
155
+ private readonly _ngZone : NgZone ,
154
156
elementRef : ElementRef ,
155
157
renderer : Renderer2 ,
156
158
@Attribute ( 'role' ) role : string ) {
@@ -164,6 +166,15 @@ export class CdkTable<T> implements CollectionViewer {
164
166
this . _dataDiffer = this . _differs . find ( [ ] ) . create ( this . _trackByFn ) ;
165
167
}
166
168
169
+ ngDoCheck ( ) {
170
+ // After the the content and view have been initialized and checked then we can connect
171
+ // to the data source and render data rows. This cannot be done from within change detection,
172
+ // so the table must wait until the next change detection cycle before rendering.
173
+ if ( this . _isViewInitialized && this . dataSource && ! this . _renderChangeSubscription ) {
174
+ this . _observeRenderChanges ( ) ;
175
+ }
176
+ }
177
+
167
178
ngAfterContentInit ( ) {
168
179
this . _cacheColumnDefinitionsByName ( ) ;
169
180
this . _columnDefinitions . changes . subscribe ( ( ) => this . _cacheColumnDefinitionsByName ( ) ) ;
0 commit comments