CODEWITHSUNDEEP
angularngmodeltwo-way-binding
Abdulrahman Mian
Abdulrahman Mian

Reputation: 1

Last element in ngfor causes ng100:expression has changed after

I use [(ng model)] for a property in a ng for. I need a two-way data binding since I need to update the property and display its new value. For some reason the last element causes ng100 error. So, if I add another element to the list, the second last element does not cause the ng100 error anymore. Does someone know why the last index would always cause this ng100 error of changed after... The line that is causing it it [(ng model)] =item.params

I have tried to use [ng model] instead and then use event but that did not sort it out. I have also.tried this.cdRef.detectChanges() and it did not work since then I could not change the input at all. My HTML looks like below. My ts file has no code related to this.

<div *ngFor="let items of items; 
index as i;>
<form>
<div *ngif="show(i)">
<input[(ngmodel)] ="item.params" 
 name="params">
<\div>
<\form>
<\div>

Upvotes: 0

Views: 188

Answers (1)

Shad
Shad

Reputation: 1219

The ng100 is a common issue faced by many beginners who don't completely understand how change detection works. Regarding your issue, it would help if you showed the code as well. But in general, you can make use of one-way binding [ngModel] instead of using two-way binding [(ngModel)].

and in your loop make use of the (ngModelChange) event handler.

eg

<div *ngFor="let item of items; let i = index">
  <input [ngModel]="item.name" (ngModelChange)="yourMethod($event,i)">
</div>

Change detection

Upvotes: 0

Related Questions