• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

152
Vistas
Html not showing list from Component in Angular

As the Title shows, that is basically my problem. I get my list of objects in my component from the Api. The list is loaded with the correct data as I show it on the console to check it.

When the table is created with the *ngFor, recognizes the amount of objects inside but not the attributes.

I have an interface to map the objects received from the api.

I tried building an array already loaded on the component and the table gets loaded correctly, so the problem is with the list that i load from the Api response.

This is what i have on my service: (This works fine)

@Injectable({
    providedIn: 'root'
})
export class UserService {
    private baseUrl: string = environment.baseUrl + 'api/';
    constructor(private http: HttpClient) { }
   
    public getUsers(): Observable<ShowUserModel[]> {
        return this.http.get<ShowUserModel[]>(this.baseUrl + `users`);
    }
}

This is my component:

@Component({
  selector: 'app-user-list',
  styleUrls: ['./user-list.component.css'],
  providers: [UserService],
  templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
  public users: ShowUserModel[] = [];

  constructor(private router: Router,
              private service: UserService) { }

 ngOnInit(){
        this.getUsers();
  }

  public getUsers(){
    this.service.getUsers().subscribe(data =>{
      this.users = data;
      console.log(data)
    } );
  }

And this is the html template:

<div class="jumbtron">
  <h1 class="display-4 text-center">Users</h1>
</div>

<div class="container">
  <button type="button" class="btn btn-success" (click)="addUser()">New User</button>
  <hr />

  <table class="table table-dark table-condensed table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th scope="col">Username</th>
        <th scope="col">Id</th>
        <th scope="col">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of users">
        <th scope = "row">{{user.Username}}
        <td>{{user.Id}}</td>
        <td>{{user.Role}}</td>
      </tr>
    </tbody>
  </table>
</div>

Thanks!

This is the table

This is the console log from the array

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Bad field names. Should be:

    <th scope="row">{{user.username}}
    <td>{{user.id}}</td>
    <td>{{user.role}}</td>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda