1

Seguinte, não estou conseguindo fazer a requisição de uma api, um get. Segue codigo e response da api.

User.model:

export interface ResponseUsers {
    data:User;
}

export interface User {
    id: number;
    nome: string;
    email: string;
    login: string;
    admin: boolean;
}

UserService:

@Injectable({
  providedIn: 'root'
})
export class UserService {

  public url = "https://combustivelapp.herokuapp.com/api/usuarios";

  constructor(private http: HttpClient) { }

  getUser(): Observable<ResponseUsers> {
    return this.http.get<ResponseUsers>(this.url);
  }
}

Lista HTML com os dados:

<tr *ngFor="let user of responseUsers.data">
    <th scope="row" text-align="center">{{user.id}}</th>
    <td>{{user.nome}}</td>
    <td>{{user.email}}</td>
    <td>{{user.login}}</td>
    <td>{{user.admin}}</td>
    <td><a routerLink="/users/update/id"> Editar</a></td>
    <td><a routerLink="/users/delete/id"> Remover</a></td>
</tr>

Segue agora os dados da API:

Response body:

[
  {
    "id": 59,
    "nome": "wandesson2",
    "email": "[email protected]",
    "login": "wandessons",
    "admin": false
  }

Response Header:

 connection: keep-alive 
 content-type: application/json 
 date: Fri, 30 Oct 2020 05:19:26 GMT 
 server: Cowboy 
 transfer-encoding: chunked 
 vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers 
 via: 1.1 vegur 

Request URL:

https://combustivelapp.herokuapp.com/api/usuarios

Pronto, acho que não falta mais nada. Alguém poderia me dar um help?

1 Resposta 1

1

Rodrigo, para tentar simular seu problema faltou alguns outros trechos. Então montei um exemplo completo que está funcionando:

Service

import { Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class UserService {

  public url = "https://combustivelapp.herokuapp.com/api/usuarios";

  constructor(private http: HttpClient) { }

  getUser(): Observable<any> {
    return this.http.get<any>(this.url);
  }
}

Componente de teste

import { Component } from '@angular/core';
import { UserService } from './user.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  responseUsers$: Observable<any>;

  constructor(private service: UserService) {

  }

  ngOnInit() {
    this.responseUsers$ = this.service.getUser();
  }
}

Template

<table>
  <tr *ngFor="let user of responseUsers$ | async">
    <th scope="row" text-align="center">{{user.id}}</th>
    <td>{{user.nome}}</td>
    <td>{{user.email}}</td>
    <td>{{user.login}}</td>
    <td>{{user.admin}}</td>
    <td><a routerLink="/users/update/id"> Editar</a></td>
    <td><a routerLink="/users/delete/id"> Remover</a></td>
  </tr>
</table>

Link deste exemplo em funcionamento: https://stackblitz.com/edit/angular-ivy-tweqqz?file=src%2Fapp%2Fapp.component.html

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 .