1

Olá estou desenvolvendo uma aplicação com Ionic3, porém estou com um erro que não consigo encontrar a causa, pensei que fosse um bug, já reiniciei o servidor (ionic serve --lab) várias vezes porém o erro persiste, abaixo irei colocar o código para análise:

O modelo que será utilizado no objeto que receberá o retorno da consulta na 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;    
}

A página profile.ts que utilizará o service de consulta e passaram o objeto person para a 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)
      }
    )
  }
}

Abaixo o arquivo de serviço que realiza a busca na 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`);
        }
    }

O método que est trabalha no .ts da ProfilePage é o getProfile(), como podem ver ele é um método tipado.

Abaixo a página html onde tento imprimir o objeto:

<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>

Só que quando rodo o servidor e acesso esta View sempre retorna o erro abaixo:

inserir a descrição da imagem aqui

Fiz a verificação para ver se o método para busca na API estava funcionando, e de fato, esta trazendo o valor conforme abaixo:

inserir a descrição da imagem aqui

Para conseguir rodar a aplicação tenho que remover a referencia {{person.id}} da página .html senão o erro persiste.

O que ocasiona este erro, e como fazer a tratativa?

1 Resposta 1

1

Primeiro: Ao clicar no botão "close" do erro para voltar a sua tela, mostra o seu código na página?

Como a chamada do seu serviço é assíncrono, ao carregar a tela, o seu objeto person ainda é nulo/undefined. Você tem 2 opções para tentar resolver o problema.

  1. Inicializar o seu objeto na sua declaração ou no constructor.

person: ProfileDTO = {};

  1. A segunda opção é colocar dentro de uma div por exemplo o seu código, e colocar um *ngIf para renderizar somente se person for != null:

`

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

Espero que isso resolva o problema!

1
  • Obrigado pelo retorno pcsantana. Fazendo a declaração deu certo. Forte abraço. Commented 16/08/2018 às 17:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .