In the if (this.processo.CODIGO_FASE == this.fase.CODIGO_FASE) condition, I would like it to be true when the button color turns green and otherwise turns red.
My component:
import { Component } from '@angular/core';
import { NavController, ToastController, Button } from 'ionic-angular';
import { FaseProvider } from '../../providers/fase/fase';
import { ProcessoProvider } from '../../providers/processo/processo';
import { CalculosProvider } from '../../providers/calculos/calculos';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
fase: any;
//no android
public fases:any[];
public cont;
//no computador
/*
public fases = [
{
NOME:"FASE 1",
CODIGO_FASE:1
},
{
NOME:"FASE 2",
CODIGO_FASE:2
},
{
NOME:"FASE 3",
CODIGO_FASE:3
}
];
*/
//no android
public processo = {
NOME:"",
CODIGO_PROCESSO:"",
CODIGO_FASE:""
};
/*
public processo = {
NOME:"PROCESSO DE TRANSIÇÃO E TÉRMINO DE COMPONENTES PARA O TCC",
CODIGO_PROCESSO:1,
CODIGO_FASE:2
};
*/
constructor(public navCtrl: NavController, private toast:ToastController, private faseProvider:FaseProvider, private calculosProvider:CalculosProvider, private processoProvider:ProcessoProvider) {
}
ionViewDidEnter(){
// no android
this.getFases();
this.getProcessoAleatorio();
}
getFases(){
this.faseProvider.getAll()
.then((result:any[]) => {
this.fases = result;
this.fase.CODIGO_FASE =result;
this.toast.create({message:"fases carregadas com sucesso.", duration:1000, position:'botton'}).present();
})
.catch(()=>{
this.toast.create({message:'Erro ao carregar as fases.', 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_FASE = result.CODIGO_FASE;
this.toast.create({message:"Processo Aleatório carregado com sucesso.", duration:1000, position:'botton'}).present();
})
}
validaResposta(conta, total){
conta=0;
total=0;
if (this.processo.CODIGO_FASE == this.fase.CODIGO_FASE){
console.log('correto');
conta ++;
total ++;
} else {
console.log('incorreto');
conta --;
total --;
}
}
enviar(){
this.navCtrl.push(AboutPage);
}
}
My template: PMBOK Game
</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>
Pertence a qual fase?
</ion-list-header>
<ion-item *ngFor="let fase of fases">
<ion-label>{{fase.NOME}}</ion-label>
<ion-radio value="{{fase.CODIGO_FASE}}"></ion-radio>
</ion-item>
</ion-list>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-start round full (click)="enviar()" color="secondary">
<ion-icon name="ios-send"></ion-icon>
Confirmar
</button>
</ion-toolbar>
<div class="pontuacao">Acertos:0 | Tentativas:1</div>
</ion-footer>