Problem defining functions in Angular models

Question

I’m creating a little evaluation project, and I ran into a problem. I created a function in a checkin model that exists in my application, however, I cannot call it anywhere...

Note. Instead of the fixed value I will have a logic, I need to know what is wrong before creating such logic.

Model js.

import { CheckIn } from './models/checkIn';

export class Consulta {
  checkIn: CheckIn[];
  valorGasto: number = 0;

  valorTotal(){
    this.valorGasto = 666;
  }
}

The Total Value function is where it impales you.

import { Component, Input, OnInit } from '@angular/core';
import { CheckIn } from '../models/checkIn';
import { Consulta } from '../models/Consulta';

@Component({
  selector: 'app-consultas',
  templateUrl: './consultas.component.html',
  styleUrls: ['./consultas.component.sass']
})

export class ConsultasComponent implements OnInit{
  filtro: any;
  @Input() checkIns: CheckIn[] = [];
  consulta: Consulta[];
  consultas: Consulta[];

  ngOnInit(){
    this.consulta = [];
    this.consultas = [];
    
  }

  ngAfterContentChecked(){
    console.log("Vzio");
    if(this.checkIns.length != 0 && this.consultas.length == 0){
      console.log("cheio");
      this.checkIns.map(value => {
        this.consulta.valorGasto = 333;
        this.consulta.checkIn = value;
Aqui dá problema =>        this.consulta.valorGasto = this.consulta.valorTotal();
        this.consultas.push(this.consulta);
      })
    }
  }

  get getCheckIns(): Consulta[] {
    if(this.filtro == 1){
      return this.consultas.filter(option => new Date(option.checkIn.dataSaida) > new Date());
    }else if(this.filtro == 2){
      return this.consultas.filter(option => new Date(option.checkIn.dataSaida) < new Date());
    }else{
      return this.consultas;
    }
  }
}

Appcomponent.html:8 ERROR Typeerror: this.consulta.valorTotal is not a Function

at queries.component.ts:30

at Array.map ()

At Consultscomponent.ngAfterContentChecked (queries.component.ts:27)

at callProviderLifecycles (core.js:3232324)

at callElementProvidersLifecycles (core.js:32293)

at callLifecycleHooksChildrenFirst (core.js:32275)

checkat AndUpdateView (core.js:44276)

at callViewAction (core.js:44637)

at execComponentViewsAction (core.js:44565)

checkat AndUpdateView (core.js:44278)

Answer 1

In your Query you are declaring the query incorrectly, the correct would be so:

    consultas: Consulta;
    consultas: Array<Consulta>;

and in your onInit() the right thing would be:

ngOnInit(){
    this.consulta = new Consulta();
    this.consultas = [];
  }

The this.consulta have to receive the instance of a Query class, so you would have access to its methods and attributes.