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