如何在角度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]}}。