PrimeNg p-datatable 没有选择提供的模板

Question

我有一个用例，其中我的 table 有不同数量的行和列。我也没有关于 header 名字的任何信息。

我正在尝试使用以下实现：

我使用 @ViewChild('tableref ') tableref ; 获取 table 的引用然后我调用一个服务来获取列列表并将其分配为： tableref .columns = colArray;

此 colArray 包含具有 field 和 headers 属性的 object，它们会自动分配给 table。（这工作正常，我可以在 table 中看到 header 名称）

然后我正在准备一个 objects data 的数组，其中 objects 的属性名称与从 [=14 中选择的字段名称相同=].

最后在我的 html 我有：

<div class="col-sm-12 kill-padding table">
    <p-dataTable #tableref [value]="data" rowHover="true">
        <p-column>
            <ng-template pTemplate="body" let-col let-row="rowData">
              <div [pTooltip]="row[col.field]" tooltipPosition="bottom">
                <h2>{{row[col.field]}}</h2>
              </div>
            </ng-template>
        </p-column>
    </p-dataTable>
  </div>

在上面的模板中，只要将 row[col.field] 分配给字符串，它就会显示出来。但是，如果 row[col.field] 是 object，则模板不会绑定。我相信根本没有选择模板，因为当我检查 html 我什至看不到自定义标签。

我想在以下级别绑定一些数据： <h2>{{row[col.field]['someProperty']['finalProperty']}}</h2>

我也用过以下方法： <h2>{{row[col.field].someProperty.finalProperty]}}</h2>

在上述每种情况下，object 绑定到 table 并且 table 显示 [Object object]

是不是不能按照下面的方式绑定数据。我在这里做错了什么吗？求推荐..

Answer 1

我会做的是，将您收到的数据转换为 "readable" 数据表。

首先，你应该有你的数据：

let data = [
    {name: 'Ziggity', surname: 'Zwooty', age: 16}, 
    {name: 'Bippity', surname: 'Bopitty', age: 18}, 
];

根据您获得的数据，您应该获得该数据的属性：

let keys = Object.keys(data[0]); // ['name', 'surname', 'age']

现在，在您的 HTML 中，您可以简单地为每个键重复 primeNG 组件：

    <div class="col-sm-12 kill-padding table">
    <p-dataTable [value]="data" rowHover="true">
        <p-column *ngFor="let key of keys">
            <ng-template pTemplate="body" let-row="rowData">
              <div [pTooltip]="row[key]" tooltipPosition="bottom">
                <h2>{{row[key]}}</h2>
              </div>
            </ng-template>
        </p-column>
    </p-dataTable>
  </div>

PrimeNg p-datatable 没有选择提供的模板

PrimeNg p-datatable is not picking the provided template

angular

primeng

primeng-datatable