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