When I select the first parent's children array, it ends up selecting every other parent's children as well. This is due to index 0 remaining the same for all of them. How can I specify and highlight a specific child?
Link: Check out the stackblitz playground
I've attempted comparing the indices of parents and children, but I still can't pinpoint and highlight a specific child within the array.
home.html
<style>
.highlight {
background-color:#777;
}
</style>
<ion-item *ngFor="let date of testList">
{{date.date}}
<ion-item *ngFor="let item of date.item; let i = index" [class.highlight]="i === selectedOne" (tap)="onSelected(i)">
{{item.name}}
</ion-item>
</ion-item>
home.ts
public testList: any[] = [
{
date: 'test1',
item: [{
name:'tony',
id:23
},
{
name:'shawn',
id:12
},
{
name:'rancho',
id:33
}
]
},
{
date: 'test2',
item: [{
name:'Monty',
id:345
},
{
name:'Bob',
id:321
},
{
name:'Dexter',
id:324
}
]
},
{
date: 'test3',
item: [{
name:'Trillo',
id:234
},
{
name:'Stenly',
id:12
},
{
name:'Destro',
id:123
}
]
}
]
public selectedOne: boolean
onSelected(index) {
if (this.selectedOne !== index) {
this.selectedOne = index;
} else {
this.selectedOne = null;
}
}
I am aiming to identify and highlight a specific child item.https://i.sstatic.net/1FRe2.png