Ionic - error (undefined) Area name

0

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>
    
asked by anonymous 25.05.2018 / 23:43

0 answers