0

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

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

我使用获取表的引用@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]

是不是不能通过以下方式绑定数据。我在这里做错什么了吗。请建议..

4

1 回答 1

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>
于 2017-09-11T08:15:04.867 回答