Every time you run this line
this.toast.create({message: 'Você errou, a area correta é ${this.processo.NOME_AREA}',duration: 3000,position: 'top'}).present();
The value of the area is appearing as undefined
My component:
import { AreaProvider } from './../../providers/area/area';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, Button} from 'ionic-angular';
import { ProcessoProvider } from '../../providers/processo/processo';
import { CalculosProvider } from '../../providers/calculos/calculos';
@IonicPage()
@Component({
selector: 'page-area',
templateUrl: 'area.html',
})
export class AreaPage {
public codigoAreaEscolhida:number;
public acertos:number;
public tentativas:number;
//no android
public areas:any[];
//no computador
/*
public areas = [
{
NOME: "AREA 1",
CODIGO_AREA: 1
},
{
NOME: "AREA 2",
CODIGO_AREA: 2
},
{
NOME: "AREA 3",
CODIGO_AREA: 3
}
];
*/
//no android
public processo = {
NOME:"",
CODIGO_PROCESSO:"",
CODIGO_AREA:0,
NOME_AREA:""
};
//no computador
/*
public processo = {
NOME: "PROCESSO DE TRANSIÇÃO E TÉRMINO DE COMPONENTES PARA O TCC",
CODIGO_PROCESSO: 1,
CODIGO_AREA: 2,
NOME_AREA:"INCIAÇÃO"
};
*/
constructor(public navCtrl: NavController, private toast: ToastController, private areaProvider: AreaProvider, private calculosProvider: CalculosProvider, private processoProvider: ProcessoProvider) {
this.acertos = 0;
this.tentativas = 0;
this.refresh();
}
refresh() {
// no android
this.getAreas();
this.getProcessoAleatorio();
}
getAreas() {
this.areaProvider.getAll()
.then((result: any[]) => {
this.areas = result;
//this.toast.create({ message: "Areas carregadas com sucesso.", duration: 1000, position: 'botton' }).present();
})
.catch(() => {
//this.toast.create({ message: 'Erro ao carregar as areas.', duration: 1000, position: 'botton' }).present();
});
}
getProcessoAleatorio() {
let processoAleatorio = this.calculosProvider.getRandomInt(1, 48);
this.processoProvider.getById(processoAleatorio)
.then((result: any) => {
this.processo.NOME = result.NOME;
this.processo.CODIGO_PROCESSO = processoAleatorio;
this.processo.CODIGO_AREA = result.CODIGO_AREA;
this.processo.NOME_AREA = result.NOME_AREA;
this.toast.create({ message: "SUCESSO", duration: 1000, position: 'botton' }).present();
})
}
enviar() {
if (this.processo.CODIGO_AREA == this.codigoAreaEscolhida) {
this.toast.create({message: 'Parabéns, você acertou',duration: 3000,position: 'top'}).present();
this.acertos++;
} else {
this.toast.create({message: 'Você errou, a area correta é ${this.processo.NOME_AREA}',duration: 3000,position: 'top'}).present();
}
this.tentativas++;
this.refresh();
}
areaEscolhida(codigoArea:number){
this.codigoAreaEscolhida = codigoArea;
console.log(this.codigoAreaEscolhida);
}
}
My Template:
<ion-header>
<ion-navbar>
<ion-title>
PMBOK Game
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="texto-azul fundo-padrao">
<h5>O processo <span class="texto-processo">"{{processo.NOME}}"</span></h5>
</div>
<div>
<ion-list radio-group>
<ion-list-header>
<br><br>Pertence a qual area?
</ion-list-header>
<ion-item *ngFor="let area of areas">
<ion-label>{{area.NOME}}</ion-label>
<ion-radio value="{{area.CODIGO_FASE}}" (click)="areaEscolhida(area.CODIGO_AREA)"></ion-radio>
</ion-item>
</ion-list>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-start round full (click)="enviar(area)" color="secondary">
<ion-icon name="ios-send"></ion-icon>
Confirmar
</button>
</ion-toolbar>
<div class="pontuacao">Acertos:{{acertos}} | Tentativas:{{tentativas}}</div>
</ion-footer>