IONIC3 - Error - TypeError: undefined is not an object (evaluating '_co.person.id') - I can not find the cause of the error

0

Hello, I am developing an application with Ionic3, but I have an error that I can not find the cause, I thought it was a bug, I already rebooted the server (ionic serve --lab) several times but the error persists, the code for review:

The template that will be used in the object that will receive the query return in the API.

import { EnderecoDTO } from "./endereco.dto";
export interface ProfileDTO { 
    tipoPessoa: string;
    id: string;
    ativo: string;
    nome: string;
    email: string;
    foto: string;
    telefones: string[];
    enderecos: EnderecoDTO[];
    cnpj: string;
    razaoSocial: string;
    inscricaoEstadual: string;
    nomeRepresentante: string;
    telefoneRepresentante: string;
    emailRepresentante: string;
    cpf: string;
    rg: string;
    dt_nascimento: string;    
}

The page profile.ts that will use the query service and passed the person object to the view.

import { ProfileDTO } from './../../model/profile.dto';
import { UsuarioService } from './../../service/usuario.service';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

   person : ProfileDTO;
  constructor(public navCtrl: NavController, public navParams: NavParams, public usuarioService : UsuarioService) {

  }
  ionViewDidLoad() {
    this.showProfile();
  }
  showProfile()  {
    this.usuarioService.getProfile().subscribe(
      response => {
        this.person = response;
        console.log (this.person);
      }, error => {
        console.log(error)
      }
    )
  }
}

Below the service file that performs the API search.

import { TotemDTO } from './../model/totem.dto';
import { CONF_API } from './../conf/conf.api';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { ProfileDTO } from '../model/profile.dto';

    @Injectable()
    export class UsuarioService {

        constructor (public http: HttpClient) {

        }

        showTotem() : Observable<TotemDTO> {
            return this.http.get<TotemDTO>('${CONF_API.baseUrl}/profile/totem');
        }

        getProfile() : Observable<ProfileDTO> {
            return this.http.get<ProfileDTO>('${CONF_API.baseUrl}/profile');
        }
    }

The method that works in ProfilePage's .ts is getProfile (), as you can see it is a typed method.

Below the html page where I try to print the object:

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle start>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Perfil</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>

  {{person.id}}
</ion-content>

Only when I rotate the server and access this View always returns the error below:

IcheckedtoseeifthemethodtosearchtheAPIwasworking,andinfact,isbringingthevalueasbelow:

In order to run the application I have to remove the reference {{person.id}} from the .html page otherwise the error persists.

What causes this error, and how to do it?

    
asked by anonymous 15.08.2018 / 16:41

1 answer

1

First: By clicking the "close" button of the error to return to your screen, shows your code on the page?

As your service call is asynchronous, loading the screen, your person is still null / undefined. You have 2 options to try to solve the problem.

  • Initialize your object in your declaration or in the constructor.
  • person: ProfileDTO = {};

  • The second option is to put inside a div for example your code, and put a * ngIf to render only if person for! = null:
  • '

    <ion-content padding>
      <div *ngIf="person">
        {{person.id}}
      </div>
    </ion-content>
    

    I hope this solves the problem!

        
    16.08.2018 / 18:39