ERROR TypeError: _co.deleteConsulta is not a function

Question

i was following a tutorial how to make a crud using firestore, and thus far i got everything working right until i got the part that i had to delete the data from firestore, everytime i click it to delete an user from my firestore i get the error saying that ._co.deleteConsulta is not a function, even though it was declared inside my detailpage.ts, and it shows no error, i even tried to run ionic serve --prod to see if i was missing anything, no errors whatsoever.

For the second part whenever i click delete, nothing happens no errors are shown at all.

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();
  }

}

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>

Answer 1

The problem is that you don't wrote the function deleteConsulta() or it is missing on the firestoreService file code. And also, you could maybe try to change the access from 'private' to 'public' in the Constructor declarations...