Html 如何在angular 7中的素数表中显示嵌套的json数据

我想将嵌套的json数据显示到我的prime ng表中，但我面临的问题是，当我通过http服务调用数据时，它是一个对象形式，当我将其直接显示到表中时，它会给我[object][object]

我想要显示数据的方式是，假设我有一个像这样的json，在一行中，我想要打印整个嵌套json，其中键和值是分开的

{{item.key}}和{{item.value}

我们可以做的任何事情都可以生成一个函数并返回键和值，然后将其打印到表中。像这样的

    {"hits":[
  {
    "cardetails": {
    "carname":"abc",
    "cartype":"metal",
    "carnumber": "4444"
    }
  },
  {
    "cardetails": {
    "carname":"cde",
    "cartype":"alumnium",
    "carnumber": "1212"
  }
  }
]}

我的.ts文件

  ngOnInit() {
     this.carservice.getcardata().subscribe(carservice => {
     this.tables = carservice
     console.log(this.tables);
     this.formatted=(this.tables.hits)
     console.log(this.formatted)//here this is my json object

  }

    this.cols = [
      { field: ''},
      { field: 'cardetails'},
      { field: ''},

  ];


  this.data.length < this.rows ? this.temDataLength = this.data.length : this.temDataLength = this.rows;
  }

  expandAll() {
    if(!this.isExpanded){
      this.data.forEach(data =>{
        this.expandedRows[data.time] = 1;
      })
    } else {
      this.expandedRows={};
    }
    this.isExpanded = !this.isExpanded;
  }
  onRowExpand() {

    console.log("row expanded", Object.keys(this.expandedRows).length);
    if(Object.keys(this.expandedRows).length === this.temDataLength){
      this.isExpanded = true;
    }
  }

  onRowCollapse() {

    console.log("row collapsed",Object.keys(this.expandedRows).length);
    if(Object.keys(this.expandedRows).length === 0){
     this.isExpanded = false;
    }
  }
}

恩戈尼尼特（）{
this.carservice.getcardata（）.subscribe（carservice=>{
this.tables=carservice
console.log（this.tables）；
this.formatted=（this.tables.hits）
console.log（this.formatted）//这是我的json对象
}
this.cols=[
{字段：''}，
{字段：'cardetals'}，
{字段：''}，
];
this.data.length{
this.expandedRows[data.time]=1；
})
}否则{
this.expandedRows={}；
}
this.isExpanded=！this.isExpanded；
}
onRowExpand（）{
log（“行扩展”，Object.key（this.expandedRows.length）；
if（Object.keys（this.expandedRows）.length==this.temDataLength）{
this.isExpanded=true；
}
}
onRowCollapse（）{
log（“行折叠”，Object.keys（this.expandedRows.length）；
if（Object.keys（this.expandedRows）.length==0）{
this.isExpanded=false；
}
}
}

.html文件

<p-table  [columns]="cols" dataKey="speed" [value]="cars" (onPage)="onPage($event)"
            (onRowExpand)="onRowExpand()" (onRowCollapse)="onRowCollapse()" 
            [expandedRowKeys]="expandedRows" [rowExpandMode]='single' [resizableColumns]="true">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width: 24px;background-color:#2F4A6A;">
                </th>
                <th style="width:7em;background-color:#2F4A6A;color:white;width:85px;height:33px;font-size:12px;text-align:left"><span>cars ranking</span>
                 </th>
                <th style="background-color:#2F4A6A;color:white;width:600px;height:33px;padding:8px;font-size:12px;text-align:left"><span>Car Detail in a single row</span>
                </th>
                <th style="width: 24px;background-color:#2F4A6A;" ></th>
            </tr>
        </ng-template>
        <ng-template let-rowIndex="rowIndex"  pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns" let-index>
            <tr>
                <td>
                    <a href="#" [pRowToggler]="rowData">
                        <i  style="color:black;font-size:14px;"[ngClass]="expanded ? 'pi pi-caret-down ': 'pi pi-caret-right'"> </i></a>
                </td>
                <td *ngFor="let col of cols">
                <div *ngIf="col.field==source;then nested_object_content else normal_content"></div>
                    <ng-template #nested_object_content>
                            {{rowData[col.field.key]}} -- {{rowData[col.field.value]}}
                    </ng-template>
                    <ng-template #normal_content>
                            {{rowData[col.field]}}
                    </ng-template>
                </td>
            </tr>
        </ng-template>

      </p-table>

汽车排名
单行中的车辆详细信息
{{rowData[col.field.key]}--{{rowData[col.field.value]}
{{rowData[col.field]}

我建议您在将JSON面内对象格式分配给表之前对其进行解析。使用该JSON结构，即使使用嵌套对象实现，您可能也必须覆盖一些表功能，如搜索、排序等，这将导致不必要的问题并导致性能问题。最好将数据转换为into平面格式化。它将是简单而简单的实现

请阅读下面的问题线程，类似的问题会导致T-table上的一些基本实现问题

---

您可以尝试cardetails.carname作为字段，而不仅仅是cardetails。它应该可以工作