Javascript Angular 4使用类型脚本解析响应数据

我有如下响应数据：

{
  "content": [{
    "id": 1,
    "userName": "v7001",
    "status": 1,
    "userInfo": {
      "id": 1,
      "fullName": "Naruto Uzumaki",
      "firstName": "Naruto",
      "lastName": "Uzumaki",
      "address": "Konoha",
      "dob": 1509901200000
    }
  }, {
    "id": 2,
    "userName": "v7002",
    "status": 0,
    "userInfo": {
      "id": 2,
      "fullName": "Hinata Hyuga",
      "firstName": "Hinata",
      "lastName": "Hyuga",
      "address": "Konoha",
      "dob": 1509987600000
    }
  }],
  "last": true,
  "totalElements": 3,
  "totalPages": 1,
  "size": 20,
  "number": 0,
  "first": true,
  "sort": null,
  "numberOfElements": 3
}

和用户4以显示数据。我创建了2个界面：用户信息

export class UserInfo {
  id: number;
  fullName: string;
  firstName: string;
  lastName: string;
  address: string;
  dob: string
}

和用户

import {UserInfo} from './user-info'

export class User {
  id: number;
  userName: String;
  status: String;
  userInfo: UserInfo;
}

用户服务：

getUsers(): Promise<User[]> {
  return this.http.get(this.userUrl)
    .toPromise()
    .then(response => response.json().data as User[])
    .catch(this.handleError);
}

和html格式：

 <tr role="row" class="odd" *ngFor="let lst of user.content">
   <td>{{lst.userInfo.fullName}}</td>
   <td>{{lst.userInfo.address}}</td>
</tr>

{{lst.userInfo.fullName}
{{lst.userInfo.address}

但当应用程序运行时，控制台上会显示错误消息：content invalid。

---

此.user未定义。请给我建议。

如果您希望从

getUsers

方法接收

用户

收集，那么请返回

response.json（）.content

而不是

response.json（）.data

，然后

User[]

为

User[]提供收集工具是有意义的。

getUsers(): Promise<User[]> {
  return this.http.get(this.userUrl)
    .toPromise()
    .then(response => response.json().content as User[])
    .catch(this.handleError);
}

HTML

<tr role="row" class="odd" *ngFor="let lst of users">
  <td>{{lst.userInfo.fullName}}</td>
  <td>{{lst.userInfo.address}}</td>
</tr>

{{lst.userInfo.fullName}
{{lst.userInfo.address}

user

是组件中的一个数组，它没有

内容

属性。请注意：angular团队已弃用。改用。

this.userService.getUsers().then(users => this.users = users);

<tr role="row" class="odd" *ngFor="let lst of users">
  <td>{{lst.userInfo.fullName}}</td>
  <td>{{lst.userInfo.address}}</td>
</tr>