I am currently working with Ionic and Firebase Firestore. My goal is to implement a functionality where users can click on a specific ion-card containing an object, triggering a method to display an ion-action-sheet with a Delete button. This would allow them to delete the selected object, which is stored in an array within Firestore.
Here is an overview of the data structure:
This snippet shows the current HTML file pertaining to the ion-card:
<ion-card class="lightCard" *ngFor="let reviews of revArr" (click)="selectReview()">
<ion-card-header>
<ion-grid>
<ion-row>
<ion-icon name="person-circle-sharp" class="profIcon"></ion-icon>
<ion-card-title class="cardUsername fontWhite" style="font-size: 35px;">{{reviews.userName}}</ion-card-title>
</ion-row>
</ion-grid>
</ion-card-header>
<ion-card-content class="font cardContent">
<h1 class="title" style="font-weight: bold;">{{reviews.title}}</h1>
{{reviews.review}}
</ion-card-content>
</ion-card>
Below is the code within the corresponding class:
ngOnInit() {
const compId: string = this.route.snapshot.paramMap.get('id'); //get id
//for reviews array in `reviews`
this.reviewCollection = this.afStore.doc(`reviews/${compId}`)
this.rev = this.reviewCollection.valueChanges().subscribe(item =>{
this.revArr = item.reviews
this.userNrev = item.reviews.userName
})
}
async selectReview(){
const actionSheet = await this.actionSheetCtrl.create({
header: "Delete "+ this.userNrev + "'s review?",
buttons: [
{
text: 'Delete',
handler: () => {
//delete code
}
}
]
})
await actionSheet.present();
}
The main question at hand revolves around obtaining the index from the Firestore array and utilizing it for deleting the respective object.
I would greatly appreciate any assistance as I am still relatively new to these concepts.