如何在角度2中动态设置表头？

Question

我正在获取JSON数据，并将JSON数据存储在我的财产上。

this.ResultData_search=data.json().extras.ResultData 

this.ResultData=[ 

    { 
     "First_name": "xx", 
     "Email": "xxxx", 
     "Phone": "xxx", 
     "countryCode": "+91", 
     "order_datetime": "xxx", 
     "status": 11, 
     "DeviceType": 3, 
     "orderId": "59081a04c9ff6852a49dd32a", 
     "orderseqId": "E00002347", 
     "orderType": 1, 
     "CustomerID": "xx", 
     "pickAddress": "xx", 
     "dropAddress": "xx", 
     "pickLatitude": 17.4369414, 
     "dropLatitude": 17.43673, 
     "dropLongitude": 78.36710900000003, 
     "paymentType": 2, 
     "itemDescription": "", 
     "receiverName": "uday", 
     "receiverPhone": "xx", 
     "itemName": "sanjay", 
     "deliverycharge": "199", 
     "bookingType": 1 
     } 
     }] 

我想设置所有的键作为表标题和数据作为表行。我提到了下面的链接https://stackoverflow.com/questions/40713580/angular2-table-with-dynamic-rows-and-columns

链接2：Dynamically loading columns and data in to table in Angular 2

任何plunker将是对我很大的帮助。

Answer 1

关键的解决方案是将对象ResultData转换为一个键数组。然后你可以轻松地迭代它。您可以使用Object.keys(this.ResultData)获取对象的按键。

component.ts

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <table> 
    <thead> 
    <tr> 
     <td *ngFor=" let key of keys"> 
     {{key}} 
     </td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor=" let res of ResultData"> 
     <td *ngFor=" let key of keys"> 
     {{res[key]}} 
     </td> 
    </tr> 
    </tbody> 
</table> 
    `, 
}) 
export class App { 
    name:string; 
    ResultData=[ 
    { 
     "First_name": "xx", 
     "Email": "xxxx", 
     "Phone": "xxx", 
     "countryCode": "+91", 
     "order_datetime": "xxx", 
     "status": 11, 
     "DeviceType": 3, 
     "orderId": "59081a04c9ff6852a49dd32a", 
     "orderseqId": "E00002347", 
     "orderType": 1, 
     "CustomerID": "xx", 
     "pickAddress": "xx", 
     "dropAddress": "xx", 
     "pickLatitude": 17.4369414, 
     "dropLatitude": 17.43673, 
     "dropLongitude": 78.36710900000003, 
     "paymentType": 2, 
     "itemDescription": "", 
     "receiverName": "uday", 
     "receiverPhone": "xx", 
     "itemName": "sanjay", 
     "deliverycharge": "199", 
     "bookingType": 1 
     } 
     ] 
    constructor() { 
    } 
    keys: string[]=[]; 

    ngOnInit() { 
     this.keys= Object.keys(this.ResultData[0]) 
    } 

} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

link这具有使用管道JSON对象转换成阵列的替代方式。

这里是一个working plunkr.

Regading以下部分：

<tr *ngFor=" let res of ResultData"> 
     <td *ngFor=" let key of keys"> 
     {{res[key]}} 
     </td> 
    </tr> 

ResultData是项目的阵列。对于每个项目，我们将创建一个表格行，我们将显示每个项目的内容。这就是为什么我们重复<tr>为每个项目res在阵列ResultData。

然后，对于ResultData中的每个项目res，我们将遍历我们先前在ts代码中准备的keys数组。对于keys中的每个项目key，我们将显示项目的值为{{res[key]}}。