Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Type Error: Cannot read property 'preco' of Undefined TypeError

cadastro.html

<ion-header>

  <ion-navbar>
    <ion-title>Cadastro</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <h2>{{carro.nome}}</h2>
  <p>R$  {{ precoTotal }}   </p>

  <form (ngSubmit)="agenda()" #formulario="ngform">

    <ion-item>
        <ion-label stacked >Nome</ion-label>
        <ion-input [(nogModel)]="nome" name="nome"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked >Endereço:</ion-label>
        <ion-input [(nogModel)]="endereco" name="endereco"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked >Email</ion-label>
        <ion-input [(nogModel)]="email" name="email"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked >Data</ion-label>
        <ion-datetime [(nogModel)]="data" name="data"  dateFormat="DD/MM/YY"></ion-datetime>
    </ion-item>
  </form>

  <ion-fab top right edge>
      <button ion-fab (Click)="formulario.ngSubmit.emit()" >
         <ion-icon  name="send"></ion-icon>
      </button>
  </ion-fab>

</ion-content>

cadastro.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';



@IonicPage()
@Component({
  selector: 'page-cadastro',
  templateUrl: 'cadastro.html',
})
export class CadastroPage {

  public carro: Carro;
  public precoTotal: number;

  public nome: string= '';
  public endereco: string= '';
  public email: string= '';
  public data: string= new Date().toISOString();


  constructor(public navCtrl: NavController, 
     public navParams: NavParams) {
    this.carro = this.navParams.get('carroSelecionado');
    this.precoTotal =  this.navParams.get('precoTotal');
  }

agenda(){
   console.log(this.nome);
   console.log(this.endereco);
   console.log(this.email);
   console.log(this.data);
   }

}

tinha aparecido tudo certo porém quando avancei pras aulas sequintes apareceu o erro Type Error: Cannot read property 'preco' of Undefined TypeError...

escolha.html

<ion-header>
  <ion-navbar>
    <ion-title>Escolha</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-slides pager="true">
        <ion-slide *ngFor="let foto of carro.fotos">
          <img src="{{foto}}" />
        </ion-slide>
    </ion-slides>
  <ion-item-group>
    <ion-item-divider color="light">
      <ion-icon  name="car"></ion-icon>
        Veiculo
    </ion-item-divider>
       <ion-item>{{carro.nome}}</ion-item>
       <ion-item>{{ carro.preco }}</ion-item>
  </ion-item-group>
  <ion-item-group>
      <ion-item-divider color="light">
       <ion-icon  name="options"></ion-icon>
        Acessórios
      </ion-item-divider >

      <ion-item *ngFor="let acessorio of acessorios" >
        <ion-label>
          <h2> {{acessorio.nome}}</h2>
          <h4>R$ {{acessorio.preco}}</h4>
        </ion-label>
        <ion-toggle #toggle color="secondary" 
           (ionChange)="atualizaTotal (toggle.checked, acessorio)"></ion-toggle>
      </ion-item>
  </ion-item-group>  
  <ion-item-divider  color="light">
      <span item-right>Total : R$ {{precoTotal}}</span> 
  </ion-item-divider> 

  <ion-fab top right edge>
        <button ion-fab (click)="avancaCadastro()" >
           <ion-icon  name="arrow-dropright"></ion-icon>
        </button>
    </ion-fab>

  </ion-content>

escolha.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
import { Acessorio } from '../../modelos/acessorio';
import { CadastroPage } from '../cadastro/cadastro';

@IonicPage()
@Component({
  selector: 'page-escolha',
  templateUrl: 'escolha.html',
})
export class EscolhaPage {
  public carro: Carro;

  public acessorios: Acessorio [];
  private _precoTotal: number;



  constructor(public navCtrl: NavController, 
   public navParams: NavParams) {

    this.carro=this.navParams.get('carroSelecionado');
    this._precoTotal = this.carro.preco
    this.acessorios = [
      { nome: 'Freios ABS', preco:800 },
      { nome: 'Ar Condicionado', preco:1000  },
      { nome: 'MP3 Player', preco:500 }
    ];
  }
    atualizaTotal(ativado:boolean, acessorio: Acessorio){
      ativado ?
      this._precoTotal += acessorio.preco:
      this._precoTotal -= acessorio.preco;
    }

    avancaCadastro(){
      this.navCtrl.push(CadastroPage.name, {
        carroSelecionado: this.carro,
        precoTotal: this._precoTotal
      });
    }

    get precoTotal(){
      return this._precoTotal;
    }


}
3 respostas

Olá Bruno, blz?

Pelo que tudo indica acontece o seguinte problema, na Classe Carro não foi definido o atributo preco, por isso acontece esse erro de Undefined.

Se você puder dar uma olhadinha nessa classe e verificar se o atributo preco existe.

foi sim

  public carro: Carro;
  public precoTotal: number;

  public nome: string= '';
  public endereco: string= '';
  public email: string= '';
  public data: string= new Date().toISOString();


  constructor(public navCtrl: NavController, 
     public navParams: NavParams) {
    this.carro = this.navParams.get('carroSelecionado');
    this.precoTotal =  this.navParams.get('precoTotal');
  }
solução!

Opa, Bruno! Como vai?

Faltou vc explicar em que momento acontece esse erro na sua aplicação! É quando vc escolhe um carro? Quando faz o agendamento? Preciso saber sobre isso pra poder te ajudar!

O que pude perceber no seu código é que no arquivo cadastro.html vc escreve incorretamente nogModel quando o correto seria ngModel e Click quando o correto seria click.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!