Angular 8 DexExtreme avoiding the infamous ExpressionChangedAfterItHasBeenCheckedError

[Michael W Powell]

Hello,

I've got a data set that looks something like:

```Json

[{key: int, isSelected: boolean, label: string, weight: int}, ...]

```

And I would like to bind that data set to a `DevExtreme` `dx-list`. I've got layout issues, but the data is at least being rendered in the list as expected.

When I change the `isSelected` checkbox, or attempt to manipulate the `weight`, I am receiving the infamous:

```

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value: true'. Current value: 'value: false'.

```

Obviously this is "by design" but how does one properly bind data for editability? I'm not sure I fully understand that whole issue.

Thanks, cheers,

Michael W. Powell

[Michael Powell]

My goal here is to facilitate user input through the Dx list, or any Ng populated component for that matter.

In this case, a list of items that can receive input through a Dx check box and also through a Dx numeric spin edit.

So how is this possible when the exception is thrown such as it is?

Thanks, cheers,

Michael W. Powell

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/v4OwSpfXAnU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/2320b73a-3237-4e99-a491-0c438f299260o%40googlegroups.com.

[Michael Powell]

On Tue, Jul 28, 2020 at 10:06 AM Michael Powell <mwpow...@gmail.com> wrote:

On Tue, Jul 28, 2020 at 12:35 AM Michael W Powell <mwpow...@gmail.com> wrote:

Hello,

I've got a data set that looks something like:

```Json

[{key: int, isSelected: boolean, label: string, weight: int}, ...]

```

And I would like to bind that data set to a `DevExtreme` `dx-list`. I've got layout issues, but the data is at least being rendered in the list as expected.

When I change the `isSelected` checkbox, or attempt to manipulate the `weight`, I am receiving the infamous:

```

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value: true'. Current value: 'value: false'.

```

Obviously this is "by design" but how does one properly bind data for editability? I'm not sure I fully understand that whole issue.

My goal here is to facilitate user input through the Dx list, or any Ng populated component for that matter.

In this case, a list of items that can receive input through a Dx check box and also through a Dx numeric spin edit.

So how is this possible when the exception is thrown such as it is?

My view code is this, which populates as expected. However, I cannot do any user input here because of this exception.

<dx-list [items]="src.myItems" width="50%">
  <div *dxTemplate="let x of 'item'">
    <div class="col-4">
      <div hidden>{{x.key}}</div>
      <div><dx-check-box [(value)]="x.isSelected"></dx-check-box></div>
      <div>{{x.label}}</div>
      <div><dx-number-box [(value)]="x.weight" [min]="0" [showSpinButtons]="true" [(disabled)]="!x.isSelected"></dx-number-box></div>
    </div>
  </div>
</dx-list>

By design, the number input box should only be enabled when the checkbox is checked. The user should be able to engage with both elements.

Key and label are intended to be hidden and a static label, respectively.

This is part of a larger view in which:

<div *ngIf="src" class="row">...</div>

As it relates and is important to the subview, if I understand it correctly.

[Sander Elias]

Hi Michael,

Devextreme has its own support system. Perhaps they can help you.
My experience with devExtreme is aged, and while I recognize the problem, I have no clue how to help you without spending a couple of hours with it again. I know better uses of my spare time ;) 

Regards

Sander

Op dinsdag 28 juli 2020 om 16:36:54 UTC+2 schreef Michael W Powell:

[Michael W Powell]

On Tuesday, July 28, 2020 at 12:35:00 AM UTC-4, Michael W Powell wrote:

Hello,

I've got a data set that looks something like:

```Json

[{key: int, isSelected: boolean, label: string, weight: int}, ...]

```

And I would like to bind that data set to a `DevExtreme` `dx-list`. I've got layout issues, but the data is at least being rendered in the list as expected.

I got it sorted out. Apparently I was using an "input/output" Ng protocol to specify the numeric spinner, i.e. "[(disabled)]='...'", when what I really wanted was "[disabled]='...'". I corrected that and it works like a champ.

[Michael W Powell]

On Wednesday, July 29, 2020 at 6:41:23 AM UTC-4, Sander Elias wrote:

Hi Michael,

Devextreme has its own support system. Perhaps they can help you.
My experience with devExtreme is aged, and while I recognize the problem, I have no clue how to help you without spending a couple of hours with it again. I know better uses of my spare time ;) 

Appreciate the constructive feedback.