Javascript 在素描中显示列中的嵌套对象

我遵循Priming docs中给出的模板选项，在Priming datatable列的旁边创建一个列数据链接，但我无法使用{{data[col.field]}显示嵌套对象

{{data[col.field]}

我怎样才能做到这一点

共享整个代码-->

{{data[col.field]}

不推荐使用PrimeNG DataTable，请改用Table（又名TurboTable）

无论如何，您可以访问数据表中的嵌套对象，如下所示：

<p-table [columns]="cols" [value]="data" ... >
  ...
  // Definition of table body
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
         <div *ngIf="col.subfield;then nested_object_content else normal_content"></div>
         <ng-template #nested_object_content>
           {{rowData[col.field][col.subfield]}}
         </ng-template>
         <ng-template #normal_content>
           {{rowData[col.field]}}
         </ng-template>
      </td>
    </tr>
  </ngTemplate>
  ...
</p-table>

---

我希望这对你有帮助。：）

作为Bandeeta关于TurboTable所说的后续内容：此解决方案可以处理多个嵌套属性，而不仅仅是一个子字段：

<tr [pSelectableRow]="row">
  <td *ngFor="let col of columns">
    <span>{{ getCellData(row, col) }}</span>
  </td>
</tr>

---

这可能有点晚了，但我最终得到了一个不同的解决方案。我有自己的基于p-table的表组件，我绑定了列、行等

我专门为此创建了一个组件，然后绑定当前行和列

<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
        <td *ngFor="let col of columns">
          <app-table-column [column]="col" [row]="rowData"></app-table-column>
        </td>
    </tr>
</ng-template>

这是我的表列组件，我正在分享一个非常基本的东西，但您可以根据自己的意愿/需要对其进行改进

我使用lodash根据字段（列）获取行的值，它适用于虚线（嵌套属性）或平面属性

    import { Component, Input, OnInit } from '@angular/core';
import * as moment from 'moment';
import * as _ from 'lodash';

@Component({
  template: `
    <span>
      {{ value }}
    </span>
  `,
  selector: 'app-table-column',
})
export class TableColumnComponent implements OnInit{

  @Input() column;
  @Input() row;

  value: any;

  constructor() {}

  ngOnInit(): void {
    this.parseValue(_.get(this.row, this.column.field));
  }

  parseValue(value) {
    switch (this.column.type) {
      case 'date':
        this.value = moment(value);
        break;

      default:
        this.value = value;
      break;
    }
  }

}

从'@angular/core'导入{Component，Input，OnInit}；
从“时刻”导入*作为时刻；
从“lodash”导入*as uuu；
@组成部分({
模板：`
{{value}}
`,
选择器：“应用程序表列”，
})
导出类TableColumnComponent实现OnInit{
@Input（）列；
@Input（）行；
价值：任何；
构造函数（）{}
ngOnInit（）：void{
this.parseValue（u.get（this.row，this.column.field））；
}
解析值（value）{
开关（this.column.type）{
案例“日期”：
该值=力矩（值）；
打破
违约：
这个值=值；
打破
}
}
}

您可以使用角度自定义管道执行此操作。这里有样品

app.component.html

{{col.header}}
{{rowData}字段：col}

app.component.ts

从“@angular/core”导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
汽车=[
{
年份：2019年，
品牌：{
名称：“丰田”
},
颜色：“白色”，
乘客:[
{
姓名：“约翰”
}
]
},
{
年份：2018年，
品牌：{
名称：“丰田”
},
颜色：“白色”，
乘客:[
{
姓名：“苏珊娜”
}
]
},
{
年份：2017年，
品牌：{
名称：“丰田”
},
颜色：“白色”，
乘客:[
{
姓名：“格汗”
}
]
}
];
科尔斯：任何[]；
构造函数（）{}
恩戈尼尼特（）{
this.cols=[
{字段：“年”，标题：“年”}，
{字段：“brand.name”，标题：“brand”}，
{字段：“颜色”，标题：“颜色”}，
{字段：“乘客.0.name”，标题：“乘客”}
];
}
}

下面是运行示例

---

有一篇关于如何以类型安全的方式实现这一点的文章，但是如果安全不是问题，您可以使用Lodash的“

get

函数，这样就不必偏离使用疯狂子字段的基本表

// in .ts file
import {get} from 'lodash';

// give it a different name if you like
_ = get;

// columns
this.columns = [
    {field: 'user.address.postcode', header: 'Post Code'}
]

然后在html中

<p-table [columns]="columns" [value]="users$ | async" styleClass="p- 
datatable-sm">
<ng-template pTemplate="header" let-columns>
<tr>
  <th *ngFor="let col of columns">
    {{col.header}}
  </th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
  <td *ngFor="let col of columns">
    {{_(rowData, col.field)}}
  </td>
</tr>
</ng-template>
</p-table>

{{col.header}}
{{{（行数据，列字段）}

this.cols=[
{字段：'value1'，标题：'value1'}，
{field:'value2'，header:'Value 2'，element:true}，
];

{{col.header}}：
{{col.element？行数据[col.field]。标签：行数据[col.field]}
你能分享整个
p-datatable
html代码和它附带的打字脚本吗？或者更好的是，创造一个打劫者？此外，您应该删除
字段
属性的方括号。如果我将其设置为平面对象，则一切正常，但如何使其适用于嵌套对象。您可以共享相关的typescript代码吗？我下面的代码与示例相同，但我从后端获得的数据是某些字段的嵌套对象。对于嵌套obj，我们可以写car.color等，对吗？那个么子字段的排序呢？@Harsh你们找到答案了吗？很好。。。为了避免空引用访问，您可以替换为>>value=value？值[prop]：''；是的，但这对可编辑绑定（即ngModel）不起作用。它工作起来很有魅力，stackblitz演示正是我想要的。感谢@gkhnclk提供了一个简单的解决方案
// in .ts file
import {get} from 'lodash';

// give it a different name if you like
_ = get;

// columns
this.columns = [
    {field: 'user.address.postcode', header: 'Post Code'}
]

<p-table [columns]="columns" [value]="users$ | async" styleClass="p- 
datatable-sm">
<ng-template pTemplate="header" let-columns>
<tr>
  <th *ngFor="let col of columns">
    {{col.header}}
  </th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
  <td *ngFor="let col of columns">
    {{_(rowData, col.field)}}
  </td>
</tr>
</ng-template>
</p-table>