如何在angular 2中动态设置表格标题? [英] How to set table heading dynamically in angular 2?

问题描述

我正在获取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:动态加载列和数据到Angular 2中的表中

任何朋克主义者都会对我有很大帮助.

解决方案

关键解决方案是将对象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 {}

此链接具有使用管道的另一种方法将JSON对象转换为数组.

这是一个正在工作的朋克.

修改以下部分:

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

ResultData是一个项目数组.对于每个项目，我们将创建一个表格行，并显示每个项目的内容.这就是为什么我们对数组ResultData中的每个项目res重复<tr>的原因.

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

I am getting JSON data and I am storing JSON data on my property.

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

I want to set all keys as table heading and data as table rows. I referred to the below linkshttps://stackoverflow.com/questions/40713580/angular2-table-with-dynamic-rows-and-columns

Link 2:Dynamically loading columns and data in to table in Angular 2

Any plunker will be very helpful to me.

解决方案

The key solution is to convert the Object ResultData into an array of keys. Then you can easily iterate over it. You can get the keys of the object using 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 {}

This link has an alternative way of using a pipe to convert a JSON object into an array.

Here is a working plunkr.

Regading the following part :

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

ResultData is an array of items. For each item we will create a table row, and we will display the content of each item. That is why we repeat <tr> for each item res in the array ResultData.

Then, for each item res in the ResultData we will iterate over the array of keys we prepared earlier in the ts code. For each item key in the keys we will display the value of item as {{res[key]}}.

这篇关于如何在angular 2中动态设置表格标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！