Error: Uncaught (in promise): TypeError: Can not read property 'NAME' of undefined TypeError: Can not read property 'NAME' of undefined

Giving this error guys

  

Error: Uncaught (in promise): TypeError: Can not read property 'NAME' of undefined TypeError: Can not read property 'NAME' of 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 {

  area: any;
  //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:""
};

/**/
public processo = {
  NOME:"PROCESSO DE TRANSIÇÃO E TÉRMINO DE COMPONENTES PARA O TCC",
  CODIGO_PROCESSO:1,
  CODIGO_AREA:2
};


constructor(public navCtrl: NavController, private toast:ToastController, private areaProvider:AreaProvider, private calculosProvider:CalculosProvider, private processoProvider:ProcessoProvider) {

}

ionViewDidEnter(){

  // 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.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_AREA == this.area.CODIGO_AREA){

    console.log('correto');
    conta ++;
    total ++;

} else {
    console.log('incorreto');
    conta --;
    total --;
}
}
enviar(){
  this.navCtrl.push(AreaPage);
}

}

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>
          Pertence a qual área?
        </ion-list-header>

        <ion-item *ngFor="let area of areas">
          <ion-label>{{area.NOME}}</ion-label>
          <ion-radio value="{{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()" color="secondary">
            <ion-icon name="ios-send"></ion-icon>
            Confirmar
        </button>
    </ion-toolbar>
    <div class="pontuacao">Acertos:{{conta}}  |  Tentativas:{{total}}</div>
</ion-footer>