API request at Angular

Question

Next, I’m not getting a request for an api, a get. Follow the api’s code and answer.

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

HTML list with data:

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

Now follow the API data:

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

Okay, I think there’s nothing else missing. Could someone give me a hand?

Answer 1

Rodrigo, to try to simulate his problem lacked some other excerpts. So I set a complete example that is working:

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

Test component

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 to this working example: https://stackblitz.com/edit/angular-ivy-tweqz?file=src%2Fapp%2Fapp.component.html