代码之家  ›  专栏  ›  技术社区  ›  Saurabh Tiwari

PrimeNg p-datatable未选取提供的模板

  •  0
  • Saurabh Tiwari  · 技术社区  · 7 年前

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

    我使用 @ViewChild('tableref ') tableref ; tableref .columns = colArray

    colArray 包含具有 field headers

    然后我正在准备一组对象 data ,其中对象的属性名称与从中拾取的字段名称相同 colArray

    <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] 分配给字符串,则显示该字符串。然而,如果

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

    <h2>{{row[col.field].someProperty.finalProperty]}}</h2>

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

    是否无法按以下方式绑定数据。我做错什么了吗。请建议。。

    1 回复  |  直到 7 年前
        1
  •  1
  •   user4676340 user4676340    7 年前

    我要做的是转换接收到的数据,使其通过datatable“可读”。

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

    从您获得的数据中,您应该获得该数据的属性:

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

        <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>