Angular - ExpressionChangedAfterItHasBeenCheckedError on ngFor

Question

I'm filling a table with data from an array and I want to focus a custom input on the last element of the table, so I have this:

<tr *ngFor="let detail of detailsList; let i = index" (dblclick)="showDetailDetails(detail.ID, i)"> <th>{{ a few table fields}}</th> <th> <md-input-container> <input [focus]="detailsList.length-1 == i" mdInput type="number" (keypress)="qtKeyDown($event)" (change)="getTotalNetAmount(i)" [(ngModel)]="detail.OrderedQuantity" [ngModelOptions]="{standalone: true}" value="{{detail.OrderedQuantity}}" min="1" OnlyNumber="true" [disabled]="!editMode"> </md-input-container> </th> <th> (More fields) </th> </tr>

It works as intended but when there is more than 1 item in the array I'm getting an error in my console. I notice that the problem is in this code:

detailsList.length-1 == i

Is there anyway to fix this error? The Code is working as intended so this error don't bother the behavior the website, the problem is that I don't want the user to see errors in the browser console.

RockGuitarist1 · Accepted Answer · 2018-01-26 19:32:17Z

10

This is usually related to changeDetection. Without seeing your code, I am guessing you are doing a push() at some point. Add this after your push():

import { ChangeDetectorRef } from '@angular/core'; constructor(private ref: ChangeDetectorRef) { } this.something.push(someVar); this.ref.detectChanges();

answered Jan 26, 2018 at 19:32

RockGuitarist1

7161 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

João Silva Over a year ago

Thank you for the help. I'm not at work now, so I will try it on monday and then give you the feedback.

RockGuitarist1 Over a year ago

Note that this is a dev error. Once the code is built for production, users will not see this error, so if you can't solve it, you won't have to worry about users seeing it. The error is related to change detection though.

João Silva Over a year ago

So, since it's working as intended I shouldn't worry about it? It's good to know that users will not see it. Thank you!

RockGuitarist1 Over a year ago

Ya pretty much. I mean and error is an error and you should try to fix it, but it's only an error you'll see in dev builds.

tony09uk Over a year ago

I would say worry about it! read this to understand why blog.angularindepth.com/…

|

Collectives™ on Stack Overflow

Angular - ExpressionChangedAfterItHasBeenCheckedError on ngFor

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related