While working on my app, I encountered an issue where the index returned as undefined after a successful delete operation. This prevented the item from being removed from the list.
Code
HTML
<div *ngIf="groups.length>0">
<ion-item-sliding *ngFor="let group of groups">
<ion-item class="chat-groups">
<ion-avatar slot="start">
<div *ngIf="group.photo != null; else placeholderImage">
<img (click)="openImage(group)" class="gImage" routerDirection="forward" [src]="group.photo">
</div>
<ng-template #placeholderImage>
<img routerDirection="forward" class="gImage" src="../../assets/placeholders/groups.png">
</ng-template>
</ion-avatar>
<ion-label routerDirection="forward" [routerLink]="['/tabs/', 'groups', group.id]">
<h2 [innerHTML]="group.name"></h2>
<h3 [innerHTML]="group.description"></h3>
</ion-label>
</ion-item>
<ion-item-options side="start">
// Issue with index being undefined
<ion-item-option color="danger" (click)="leaveGroup(group, $index)">Leave</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
Component
groups: any[] = [];
leaveGroup(group, index) {
this.groupsService.leaveGroup(group.id).subscribe((res: any) => {
console.log('group index: ', index); // returns undefined
console.log('group: ', group); // retrieves group data successfully
console.log('group id: ', group.id); // retrieves the id
this.groups.splice(index, 1);
Toast.show({
text: res.message
});
});
}
Any thoughts on how to resolve this issue?