Como muestra el título, ese es básicamente mi problema. Obtengo mi lista de objetos en mi componente de la Api. La lista está cargada con los datos correctos como lo muestro en la consola para comprobarlo.

Cuando la tabla se crea con *ngFor, reconoce la cantidad de objetos dentro pero no los atributos.

Tengo una interfaz para mapear los objetos recibidos de la API.

Intenté construir una matriz ya cargada en el componente y la tabla se carga correctamente, por lo que el problema está en la lista que cargo desde la respuesta de Api.

Esto es lo que tengo en mi servicio: (Esto funciona bien)

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

Este es mi componente:

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

Y esta es la plantilla html:

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

¡Gracias!

esta es la mesa

Este es el registro de la consola de la matriz