Angular index is undefined

Issue

I have list in my app and i need to remove item when delete was successful but it returns index undefined therefore my item will not delete from 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">
            // index is 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); // undefined
        console.log('group: ', group); // gets the group data
        console.log('group id: ', group.id); // gets the id
        this.groups.splice(index, 1);
        Toast.show({
            text: res.message
        });
    });
}

Any idea?

Solution

Solved

I've changed my *ngFor like this:

*ngFor="let group of groups; index as indexOfelement;"

And then

<ion-item-option color="danger" (click)="leaveGroup(group, indexOfelement)">Leave</ion-item-option>

Now I can get items index number and remove them from list.

Answered By - mafortis