I'm currently working on a project that involves creating a contacts system, but I've been encountering errors when trying to list them. Interestingly, I can successfully perform CRUD operations using Postman with the API.
One of the messages I receive from the server is:
[08/Jul/2019 18:25:35] "GET /api/contato/ HTTP/1.1" 200 230
Inquiry about contato.service.ts
import { Injectable } from '@angular/core'; import { environment } from '../../environments/environment'; import { HttpClient } from '@angular/common/http'; import { Contato } from '../interfaces/contato'; import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' }) export class ContatoService {
constructor(private http: HttpClient) { }
getListaContatos(): Observable <Contato[]> {
const url = `${environment.contatoApiUrl}/contato/`;
return this.http.get<Contato[]>(url); }
// other functions omitted for brevity
}
About lista-contato.component.ts
import { Component, OnInit, ViewChild } from '@angular/core'; import { Contato } from '../../interfaces/contato'; import { ContatoService } from '../../services/contato.service'; import { ErrorMsgComponent } from '../../compartilhado/error-msg/error-msg.component';
@Component({ selector: 'app-lista-contato', templateUrl: './lista-contato.component.html', styleUrls: ['./lista-contato.component.css'] }) export class ListaContatoComponent implements OnInit { public contatos: Contato[]; @ViewChild(ErrorMsgComponent, {static: false}) errorMsgComponent: ErrorMsgComponent;
// code snippet skipped
}
Error Encountered in Console
ListaContatoComponent.html:8 ERROR TypeError: Cannot read property 'id' of undefined at Object.eval [as updateDirectives] (ListaContatoComponent.html:12) // more error details here View_ListaContatoComponent_0 @ ListaContatoComponent.html:8
Another Issue:
Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.