While following a tutorial on creating a CRUD application using Firestore, I encountered an issue when trying to delete data from Firestore. Every time I attempt to delete a user from my Firestore database, I receive an error stating that ._co.deleteConsulta is not a function, even though it was properly declared inside my detailpage.ts file with no errors showing up. I even tried running 'ionic serve --prod' to check for any missed errors, but found none.
In addition, whenever I click the delete button, nothing happens and no errors are displayed.
Here's my detail.ts:
import { AlertController } from '@ionic/angular';
import { FirestoreService } from './../../services/data/firestore.service';
import { Consulta } from './../../model/consulta.interface';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-detail',
templateUrl: './detail.page.html',
styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit {
public consulta: Observable<Consulta>;
public consultaId;
constructor(private firestoreService: FirestoreService,
private route: ActivatedRoute, private alertController: AlertController, private router: Router) { }
ngOnInit() {
const consultaId: string = this.route.snapshot.paramMap.get('id');
this.consulta = this.firestoreService.getConsultaDetail(consultaId).valueChanges();
}
async deletarConsulta() {
const alert = await this.alertController.create({
message: 'Tem certeza que gostaria de desmarcar sua consulta?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: blah => {
console.log('Confirm desmarcação: blah');
},
},
{
text: 'Okay',
handler: () => {
this.firestoreService.deleteConsulta(this.consultaId).then(() => {
this.router.navigateByUrl('');
});
},
},
],
});
await alert.present();
}
}
Here's my detail.html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{ (consulta | async)?.unidade }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h3> Unidade </h3>
<p>
Médico{{ (consulta | async)?.medNome }}
</p>
<p> Especialidade{{ (consulta | async)?.especialidade }}</p>
<p> Endereço{{ (consulta | async)?.endereco }}</p>
<p> Data da Consulta {{ (consulta | async)?.data }}</p>
<p> Hora da Consulta {{ (consulta | async)?.hora }}</p>
<ion-button expand="block" (click)="deletarConsulta()">
Desmarcar Consulta
</ion-button>
</ion-content>