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?