Question

我有一个用例，其中我的表有不同数量的行和列。我也没有关于标题名称的任何信息。

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

我使用@ViewChild('tableref ') tableref ;获取表格的引用然后我调用服务来获取列列表并将其指定为： tableref .columns = colArray;

此colArray包含具有field和headers属性的对象，这些对象会自动分配给表。（这样工作正常，我可以看到表中的标题名称）

然后我准备了一个对象数组data，其中对象的属性名称与从colArray中选取的字段名称相同。

最后在我的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]是对象，则模板不会绑定。我相信模板根本没有被选中，因为当我检查html时，我甚至看不到自定义标签。

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

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

在上述每种情况下，对象都绑定到表格，表格显示[Object object]

是否无法以下列方式绑定数据。我在这里做错了什么。请建议..

Answer 1

我会做的是将您收到的数据转换为数据表“可读”。

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

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未选择提供的模板

1 个答案: