使用 PrimeNG 数据表答案

【问题标题】：Using PrimeNG DataTables使用 PrimeNG 数据表
【发布时间】：2018-05-20 23:45:07
【问题描述】：

尝试从 PrimeNG 设置 DataTable。我像这样从 API 得到响应

[{"firstName":"Mop","lastName":"Top","eId":"aaa123","tech":"AWS"},{"firstName":"Hey","lastName":"Arnold","eId":"hfg456","tech":"AWS"},{"firstName":"Hom","lastName":"Mom","eId":"abf654","tech":"AWS"}]

看来我可能使用了ngFor 错误，因为它没有将数组加载到表中？控制台中没有错误，所以我不确定我做错了什么。

Link to my code

是的，我知道 Datatable 已被弃用，但我无法导入 TableModule :(

【问题讨论】：

为什么你会在列定义中使用 *ngFor？
您最好查看 PrimeNG 文档以了解如何使用表格。
@Antoniossss 数据表的文档显示我相信这样做？
不，文档中的示例不会在列部分执行 *ngFor N 次
你知道*ngFor 是一个循环结构吗？？

标签： angular primeng primeng-datatable

【解决方案1】：

如果您希望表的列是动态的，则只能将 *ngFor 与 p 列一起使用。从您的代码来看，您的列根本没有在打字稿中定义，因此它们应该在您的 html 中静态定义：

<p-dataTable [value]="tech">
  <p-column field="firstName" header="First Name"></p-column>
  <p-column field="lastName" header="Last Name"></p-column>
  <p-column field="eId" header="E Id"></p-column>
  <p-column field="tech" header="Tech"></p-column>
</p-dataTable>

在PrimeNG's documentation 中，此信息位于第一个“来源”选项卡下，就在“基本”下方。

【讨论】：