如何以角度7在primeng表中显示嵌套的json数据答案

【问题标题】：How To display nested json data in primeng table in angular 7如何以角度7在primeng表中显示嵌套的json数据
【发布时间】：2020-03-13 00:55:46
【问题描述】：

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

我想要显示数据的方式是假设我有一个这样的 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;
    }
  }
}

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

【问题讨论】：

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

标签： html json angular typescript primeng

【解决方案1】：

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

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

T-table With Nested object

【讨论】：