ngFor在Angular 6中显示空数据行

Question

我正在尝试使我的第一个Angular 6应用程序正常工作，但是我陷入了这个问题。我想显示系统中的用户列表。从服务器接收了用户，但是在显示时，这些值为空。我有3个用户，然后列表显示了正确的用户数量，但值为空。 具有3个不可见用户的列表。

接收数据时，我将其记录到控制台以查看数据是否存在：

我的代码： 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);
  })
}

Answer 1

您正在使用 usr.FirstName，但您的属性类似于usr.firstName。发生此类魔术时，请务必检查错别字，例如在99％的问题中。