As I try to fill in multiple rows within a table that I've created, the table gets populated successfully. However, an error message pops up:
"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '1'. Current value: 'ah'."
Although this error doesn't crash my program, whenever I modify any unit in the table, all units end up taking on the same value as indicated by the "Current value" in the error above (in this case, it shows 'ah,' view code below)
This is how I'm adding data to the table:
<div class="row-container">
<div *ngFor="let week of getWeeks()" class="row">
<input class="week" maxlength="2" (input)="type($event.target.value, week)" value="{{getCapacity(week)}}">
</div>
</div>
And here's the methodology I employ to update the values:
getCapacity(week: Date): string {
if (<conditions are met>) {
const capacity = EntryComponent.capacity[EntryComponent.index];
EntryComponent.index++;
return capacity.value;
}
return 'ah';
}
I am not using a dynamic component as a tag, instead I am dynamically altering the value of my input tag.