DataTable - ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'NaNpx'. Current value: '352px'

[rlexa]

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
DataTable with lazy, scrollable and virtualScroll attributes causes the expression-changed in angular2 non-prod and more importantly in karma tests. Additional info: this happens when virtualTableHeight getter starts returning changing values in ScrollableView.html <div #scrollTableWrapper style="position:relative" [ngStyle]="{'height':virtualTableHeight}">.

Expected behavior
Expression-changed shouldn't be thrown in non-prod and karma tests anymore.

Minimal reproduction of the problem with instructions

<p-dataTable [value]="items" scrollable="true" scrollHeight="250px" [rows]="30" virtualScroll="true" lazy="true" [totalRecords]="totalItems" (onLazyLoad)="onLazyLoad($event)">
...

In this scenario karma tests already start failing if the dataTable isn't guarded by some ngIf basically preventing it from showing up altogether while testing.
For non-prod dev testing it is easily reproduced by introducing a checkbox with #someId and binding [scrollable]="someId.checked", then hitting the checkbox (some data should be available I guess to allow for row height calculations inside of the DataTable code).

What is the motivation / use case for changing the behavior?
DataTable with virtual lazy loading is extremely useful, but currently it causes problems due to the strict expression-changed testing in angular ^2.

Please tell us about your environment:
Windows 10 64, npm 5.0.3 + angular cli 1.1.0.

• Angular version: 4.1.3

• PrimeNG version: 4.0.3

• Browser: Chrome

• Language: TypeScript ~2.3.3

• Node (for AoT issues): node --version = v6.10.3

[cagataycivici]

@Mrtcndkn Try writing a setter on total records and directly update the height without binding using the setter.