CODEWITHSUNDEEP
angular
Christian
Christian

Reputation: 1090

ngFor displays rows of empty data in Angular 6

Im trying to get my first Angular 6 app to work but im stuck at this one problem. I want to display a list of users in the system. The users are recieved from the server but when display, the values are empty. I have 3 users and the list then shows the correct amount of user, but with empty values. The list with the 3 invisible users. enter image description here

When recieving the data I log it to console just to see if the data is there:

enter image description here

My code: user-list.component.ts

<table class="table table-sm table-hover">
  <tr *ngFor="let usr of userService.UserList">
    <td>{{usr.FirstName}} - {{usr.LastName}}</td>
    <td>{{usr.Id}}</td>
    <td>
      <a class="btn" (click)="showForEdit(employee)">
        <i class="fa fa-pencil-square-o"></i>
      </a>
      <a class="btn text-danger" (click)="onDelete(user.Id)">
        <i class="fa fa-trash-o"></i>
      </a>
    </td>
  </tr>
</table>

user.service.ts

getUserList() {
  this.http.get('https://localhost:5001/api/user/').pipe(map(data => {
    return data.json() as User[];
  }
  )).toPromise().then(x => {
    this.UserList = x;
    console.log(this.UserList);
  })
}

Upvotes: 0

Views: 682

Answers (1)

Antoniossss
Antoniossss

Reputation: 32517

You are using usr.FirstName but your properties are like usr.firstName. Always check for typos when such magic happensa as in 99% issues that is the case.

Upvotes: 2

Related Questions