Html not showing list from Component in Angular

Question

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

Answer 1

Bad field names. Should be:

    <th scope="row">{{user.username}}
    <td>{{user.id}}</td>
    <td>{{user.role}}</td>

Answer 2

Your field names must be lowercase like {{user.id}}