Clarity: Datagrid expandable rows issue in an *ngFor loop

[mim-Armand]

• [x] bug
• [ ] feature request
• [ ] enhancement

Expected behavior

When using Datagrid expandable rows in development mode in conjunction with an *ngFor, it should work.

Actual behavior

results in the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
    at viewDebugError (core.es5.js:8608)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8586)
    at checkBindingNoChanges (core.es5.js:8750)
    at checkNoChangesNodeInline (core.es5.js:12208)
    at checkNoChangesNode (core.es5.js:12182)
    at debugCheckNoChangesNode (core.es5.js:12757)
    at debugCheckDirectivesFn (core.es5.js:12659)
    at Object.View_DatagridRow_0.currVal_0 [as updateDirectives] (DatagridRow.html:19)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12641)
    at checkNoChangesView (core.es5.js:12034)

Reproduction of behavior

Plunker re-production
Please note that since Plunker is in production mode it doesn't break the app but if you open the console you'll see the same error message. ( in a professional development environment I can't set that flag to prod during development )

Please note that it works in absence of an *ngFor; maybe if in the datagrid-if-expanded.ts instead of ngOnInit() we use ngAfterViewInit() Angular won't get angry! ( haven't tried this solution tho )

Environment details

• Angular version: 4.x

• Clarity version: 0.9.3

• OS and version: Mac OS Sierra 10.12.4 (16E195)

• Browser: n/a

I would greatly appreciate to know if there is a workaround for this issue otherwise I have to re-write a component or use a different framework.

Thanks in advance for your attention and for your guidance, :)
-Mim

[mathisscott]

@youdz: Is this related to the EHC issue you are currently looking at? Please close as a duplicate if so or add to the backlog if not.

[youdz]

I believe it's related, yes, but I'd rather keep them open as each of these issues offers a different reproduction on plunker. Once I have the fix, I want to test each and every one of these plunkers to make sure it works.

[mim-Armand]

Thank you guys 👍 ,
Just wanted to mention here in case it helps others looking for a temporary solution, today I updated to Angular ^4.1.1 and while still throwing the error it doesn't block the application and now it works as it would in production mode. so it's possible to use the component if you don't mind the error in the console for the time being :)

[mim-Armand]

Sorry about multiple posts!
I have another update that should possibly close this issue ( ? )
The solution was to use *clrDgItems instead of *ngFor. doing so will completely solve the issue and keeps NG happy..

@youdz I'll close this but please feel free to re-open it if you think it should stay open and thank you so much for your attention and quick responses 👍

[theoomoregbee]

@mim-Armand what about for server driven data grid that requires *ngFor instead, still throwing error for server driven been battling with it, even to perform this

<clr-dg-action-overflow>
      <button class="action-item" >Edit</button>
      <button class="action-item" >Delete</button>
    </clr-dg-action-overflow>

or anything within clr-dg-row is throwing this error

[theoomoregbee]

the manageable solutions is the updating to the latest angular @mim-Armand 👍, but shows error

[mim-Armand]

@theo4u, yeah it will still show the error message if you are in development mode, but if you build for prod, I think it won't show it anymore. (still there tho, but it won't complain on the console!) :+1:

[theoomoregbee]

so no fix for it 😳

[mim-Armand]

@theo4u Let's open this issue again so @youdz and the team can have a second look at it, I originally closed it as *clrDgItems eliminated the problem client-side, for SSR, however, I haven't tried at all.. hopefully, by opening it again you'll get more appropriate responses, :)

[theoomoregbee]

cool thanks better

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.