EXCEPTION: Attempt to use a dehydrated detector

Hey!

I’m currently using angular2-grid and when I move some of my items, I sometime have the error angular2.dev.js:23597 EXCEPTION: Attempt to use a dehydrated detector: DeviceDetails_2 -> itemChange coming.

This is the html part of my code concerning the display of the items:

<div class="row gray-bg" [ngGrid]="gridConfig">
    <div *ngFor='#widget of widgets; #i = index' [ngGridItem]="getGridInfo(widget)"
         (dragStop)="updateWidgets(i, $event)">
                <graph-widget [currentWidget]="widget"></graph-widget>
                <text-widget [currentWidget]="widget"></text-widget>
        </div>
    </div>
</div>

As you can see, I’m using dragStop to propagate the event and launch the following method:

    updateWidgets(i: number, pos: { col: number, row: number, sizex: number, sizey: number }) {
        var gridData = {col: pos.col, row: pos.row, sizex: pos.sizex, sizey: pos.sizey};
        var widgets = _.cloneDeep(this.widgets);
        if (this.isBreakpoint('sm') || this.isBreakpoint('xs')) {widgets[i].reducedWidget.gridInfo.sm = gridData}
        else if (this.isBreakpoint('md')) {widgets[i].reducedWidget.gridInfo.md = gridData}
        else if (this.isBreakpoint('lg')) {widgets[i].reducedWidget.gridInfo.lg = gridData}
        this.updated.emit(widgets);
    }

but the error mentions itemChange, why is that? The issue is certainly coming from the this.updated.emit(widgets); because when I comment that line of code, I don’t have any issue anymore. But, I need it to send my new widgets (which contains the position of each widget. to my store (I’m using redux).

Do you know what is a dehydrated detector exactly? And I can I deal with this issue? Any help would be really appreciated, thank you in advance!

[LPalmito]

Actually I’ve made a wrong copy and paste you’re right, I’ve updated my comment in case someone is using the code I’ve written. In my real project I’m sending widgets to a reducer, which is in charge to update the this.widgets object. What can I say, I was tired when I copied and pasted it 😛 hahaha!

More seriously, I’ve an other issue I wanted to show you (the one I was talking about at the beginning actually!): http://plnkr.co/edit/yDSSAhvOC7zFvhF5IT5M?p=preview. Try that to reproduce it:

• drag widget 1 below widget 2
• use the reload button

The positions are reloaded appropriately, but the EXCEPTION: Attempt to use a dehydrated detector appears in the console logs. Do you see a way how I could reload the original positions without having this error?

[BTMorton]

OK, scratch that. It looks like it’s because the event emitter is async and removing all the items at once causes a headache. The solution is just to use synchronous events for itemChange. It’s not ideal, I guess but it’ll fix it!