Angular ngModelChange data inconsistency

Facing an issue where a key has same value in another object in an array of objects. When ngModelChange is trigerred for 2nd one the data obtained in the ts file is of first one.

I have data as follows:

[
{
name: 'Sample',
subCategory: [
{
name: 'View',
permissions: [
{name: 'sample 1', description: 'description 1'}
],
isPresent: true
}
]
},
{
name: 'Sample 2',
subCategory: [
{
name: 'View',
permissions: [
{name: 'sample 2', description: 'description 2'}
],
isPresent: true
}
]
}
]


My parent component fetches this data from store and passes to a child component.

<div *ngFor="let item of (data|async);trackBy: trackByFn;">
<app-child [childData]="item"></app-child>
</div>


In my child component I loop over the object and display the ui.

<div *ngFor="let sub of childData.subCategory; let i = index; trackBy: trackByFnMain;">
<div>
{{sub.name}}
</div>

<div>
<input
type="checkbox"
[ngModel]="sub.isPresent
(ngModelChange)="updateData($event, sub)"
>
<label [for]="sub.name + i"></label>
</div>
</div>


The name key value in sub is 'View' Which is same for two of the objects. While a checkbox/toggle is trigerred for the second item in the array the value received in updateData is of the first one:

{
name: 'View',
permissions: [
{name: 'sample 1', description: 'description 1'}
],
isPresent: true
}


I modified the trackBy to as follows, still no change occurred. Only time it worked was when i changed name value in one of the objects to some other value.

trackByFnMain(index: number, subCategory: a): strinnyg {
return `${subCategory.name}::${index}`;
}

Continue reading...