Item key not working with swipe and ng-for

Ionic Framework ionic-v3
1

Hi! Im trying to add a swipe button to a list in order the call a delete function.
The problem is that I can’t get the (click)="deleteChat(chat.$key) to work because the swipe option is outside of the ng-for.
I tryied putting it inside the <ion-item *ngFor but it just won’t show anything.

Any ideas?

THanks!

<ion-content>
    <ion-list>
        <ion-item-sliding>
            <ion-item *ngFor="let chat of chats | async" (click)="openChat(chat.$key)">
                <ion-avatar item-left>
                        <img *ngIf="!(chat.info | async).sPicture" src="assets/images/default.jpg">
                        <img *ngIf="(chat.info | async).sPicture" src="{{(chat.info | async).sPicture}}">
                </ion-avatar>
                <span>{{(chat.info | async).sDisplayName}}</span> 
            </ion-item>
            
                <ion-item-options side="right">
                    <button ion-button color="danger" (click)="deleteChat(chat.$key)">Delete</button>
                </ion-item-options>

        </ion-item-sliding>
    </ion-list>
</ion-content>
2

SOLVED!

<ion-content>
    <ion-list> 
        <ion-item-sliding *ngFor="let chat of chats | async" (click)="openChat(chat.$key)">
             <ion-item>
                <ion-avatar item-left>
                        <img *ngIf="!(chat.info | async).sPicture" src="assets/images/default.jpg">
                        <img *ngIf="(chat.info | async).sPicture" src="{{(chat.info | async).sPicture}}">
                </ion-avatar>
                <span>{{(chat.info | async).sDisplayName}}</span> 
            </ion-item>

                <ion-item-options side="right">
                    <button ion-button color="danger" (click)="deleteChat(chat.$key)">Delete</button>
                </ion-item-options>

        </ion-item-sliding>
    </ion-list>
</ion-content>