角度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 
     } 
     }] 

すべてのキーを表の見出しとデータとしてテーブルの行に設定する必要があります。どれplunkerは私にとって非常に参考になりますDynamically loading columns and data in to table in Angular 2

：私は、以下のリンクhttps://stackoverflow.com/questions/40713580/angular2-table-with-dynamic-rows-and-columns

リンク2を参照しました。

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オブジェクトを変換するためにパイプを使用する別の方法を有しています。ここ

は、以下の部分をRegading working plunkr.

ある：

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

ResultDataは、項目の配列です。各商品について、表の行を作成し、各商品の内容を表示します。そのため、配列ResultDataの各項目resに対して<tr>を繰り返します。

resResultDataの各アイテムについて、先にtsコードで用意したkeysの配列を繰り返します。 keysの各項目keyについては、項目の値を{{res[key]}}と表示します。