Error Angular + Django Rest Api

08/07/2019

boa tarde,

Estou precisando de uma ajuda, estou desenvolvendo uma agenda de contatos b�sica, por�m esta dando alguns erros ao listar os contatos. No postman eu consigo fazer o CRUD com a api.

No server eu recebo a mensagem:

-- [08/Jul/2019 18:25:35] "GET /api/contato/ HTTP/1.1" 200 230

-- Erros do console do Google Chrome:

ListaContatoComponent.html:8 ERROR TypeError: Cannot read property ''''id'''' of undefined
    at Object.eval [as updateDirectives] (ListaContatoComponent.html:12)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39358)
    at checkAndUpdateView (core.js:38370)
    at callViewAction (core.js:38736)
    at execComponentViewsAction (core.js:38664)
    at checkAndUpdateView (core.js:38377)
    at callViewAction (core.js:38736)
    at execEmbeddedViewsAction (core.js:38693)
    at checkAndUpdateView (core.js:38371)
    at callViewAction (core.js:38736)

ERROR CONTEXT DebugContext_�{view: {�}, nodeIndex: 9, nodeDef: {�}, elDef: {�}, elView: {�}}

Access to XMLHttpRequest at ''''http://127.0.0.1:8000/api/contato/'''' from origin ''''http://127.0.0.1:4200'''' has been blocked by CORS policy: No ''''Access-Control-Allow-Origin'''' header is present on the requested resource.

=================

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);
  }

  getContato(id: number): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/$`;
    return this.http.get<Contato[]>(url);
  }

  addContato(contato: Contato): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/`;
    return this.http.post<Contato[]>(url, contato);
  }

  atualizaContato(contato: Contato): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/${contato.id}`;
    return this.http.put<Contato[]>(url, contato);
  }

  deletaContato(id: number): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/$`;
    return this.http.delete<Contato[]>(url);
  }

}

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

  constructor(private contatoService: ContatoService) { }

  ngOnInit() {
    this.getListaContatos();
  }

  getListaContatos() {
    this.contatoService.getListaContatos()
      .subscribe((contatos: Contato[]) => {
        this.contatos = contatos;
      }, () => { this.errorMsgComponent.setError(''''Falha ao buscar contatos.'''' ); });
  }

  deletaContato(id: number) {
    this.contatoService.deletaContato(id)
      .subscribe(() => {
        this.getListaContatos();
      }, () => { this.errorMsgComponent.setError(''''Falha ao deletar contatos.''''); });
  }

  existemContatos(): boolean {
    return this.contatos && this.contatos.length > 0;
  }

}

Fernando

Curtir t�pico + 0

Responder

Posts

09/07/2019

Fernando

Consegui a resposta no Stackoverflow, vou postar aqui caso algu�m precise.

Quanto ao erro de property id era porque a propriedade estava fora do *ngFor no arquivo html.

Sobre o erro 203:

No django:
- Instale o cors com o comando

pip install django-cors-headers

No arquivo settings.py, adiciona no INSTALLED_APPS:

INSTALLED_APPS = [
    # I assume there are some other apps here...
    'corsheaders',
]

No MIDDLEWARE:

MIDDLEWARE  = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    # others middlewares bellow
]

Acrescente ainda no arquivo settings.py

ORS_ORIGIN_WHITELIST = [
     "http://127.0.0.1:4200" ]

Responder

Gostei + 0