IONIC3 - Error - Typeerror: Undefined is not an Object (evaluating '_co.person.id') - I can’t find the cause of the error

Question

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, already restarted the server (Ionic serve --lab) several times but the error persists, below I will put the code for analysis:

The model that will be used in the object that will receive the return of the query 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 profile.ts page that will use the query service and pass 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 search in the API.

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 this works on . ts from Profilepage 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 run the server and access this View always returns the error below:

I did the check to see if the search method in the API was working, and in fact, this bringing the value as below:

To be able to run the application I have to remove the {{person.id}} reference from the . html page otherwise the error persists.

What causes this mistake, and how to make the deal?

Answer 1

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

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

1. Initialize your object in your declaration or constructor.

person: ProfileDTO = {};

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

`

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

I hope that solves the problem!