接收数据后数据表为空答案

【问题标题】：datatable empty after receiving data接收数据后数据表为空
【发布时间】：2018-06-07 15:42:48
【问题描述】：

我正在使用primeng数据表来预览数据。

我正在使用服务从 json 获取数据。

this.searchUserService.getResultART().then(data => {
  console.log(data); // data is OK
  for (let i = 0; i < data.length; i++) {
    this.usersList.push(new User(data[i]));
  }
  console.log("user list ", this.usersList); // list OK
});

在 HTML 中创建我的数据表

<p-dataTable [value]="usersList" selectionMode="single"  [(selection)]="selectedUser" dataKey="uid" (onRowSelect)="selectedUserDetails($event)" styleClass="tab-result"  >
  <p-column field="uid" header="UID" [sortable]="true"></p-column>
  <p-column field="firstName" header="First Name" [sortable]="true"></p-column>
  <p-column field="lastName" header="Last Name" [sortable]="true"></p-column>
  <p-column field="buildingAdress" header="Address" [sortable]="true"></p-column>
  <p-column field="profile" header="Role" [sortable]="true"></p-column>
</p-dataTable>

我在屏幕上看到的是没有记录消息的空表。

Console.log 显示正确的数据，我不知道为什么表仍然是空的

【问题讨论】：

所有字段名称是否与 JSON 返回的内容完全匹配？
是的，一模一样

标签： angular typescript datatable primeng

【解决方案1】：

我经常看到这种情况发生在组件没有意识到输入发生变化的情况下，因为它没有，只有输入的属性发生了变化。

在您的回调中，尝试通过在现有数组上调用 Array.concat() 来创建一个新数组，其中包含来自数据的新映射结果。这应该会触发组件中的更改检测，因为现在传递给输入的引用已经更改。

this.searchUserService.getResultART().then(data =>
  this.usersList = this.usersList.concat(data.map(x => new User(x)));
);

【讨论】：