如何以角度 2 动态设置表格标题? [英] How to set table heading dynamically in angular 2?
问题描述
我正在获取 JSON 数据,并将 JSON 数据存储在我的财产上.
this.ResultData_search=data.json().extras.ResultDatathis.ResultData=[{"名字": "xx","电子邮件": "xxx","电话": "xxx","国家代码": "+91","order_datetime": "xxx",状态":11,设备类型":3,"orderId": "59081a04c9ff6852a49dd32a","orderseqId": "E00002347",订单类型":1,"客户 ID": "xx","pickAddress": "xx","dropAddress": "xx",pickLatitude":17.4369414,dropLatitude":17.43673,dropLongitude":78.36710900000003,"支付类型": 2,商品描述": "","receiverName": "uday","receiverPhone": "xx","itemName": "sanjay","运费": "199",预订类型":1}}]
我想将所有键设置为表格标题,将数据设置为表格行.我参考了以下链接https://stackoverflow.com/questions/40713580/angular2-table-with-dynamic-rows-and-columns
链接 2:动态加载列和在 Angular 2 中将数据放入表格
任何 plunker 都会对我很有帮助.
关键的解决方案是将 Object ResultData
转换成一个键数组.然后您可以轻松地对其进行迭代.您可以使用 Object.keys(this.ResultData)
获取对象的键.
component.ts
//我们的根应用组件从@angular/core"导入 {Component, NgModule, VERSION}从@angular/platform-browser"导入 {BrowserModule}@成分({选择器:'我的应用',模板:`<表格><头><tr><td *ngFor="let key of keys">{{钥匙}}</td></tr></thead>><td *ngFor="let key of keys">{{res[key]}}</td></tr></tbody>`,})出口类应用{名称:字符串;结果数据=[{名字":xx",电子邮件":xxxx",电话":xxx",国家代码":+91",order_datetime":xxx",状态":11,设备类型":3,订单 ID":59081a04c9ff6852a49dd32a",orderseqId":E00002347",订单类型":1,客户 ID":xx",pickAddress":xx",dropAddress":xx",pickLatitude":17.4369414,dropLatitude":17.43673,dropLongitude":78.36710900000003,支付类型":2,项目描述":",receiverName":uday",接收器电话":xx",项目名称":桑杰",运费":199",预订类型":1}]构造函数(){}键:字符串[]=[];ngOnInit() {this.keys= Object.keys(this.ResultData[0])}}@NgModule({进口:[浏览器模块],声明:[应用程序],引导程序:[应用程序]})导出类 AppModule {}此链接 提供了另一种使用管道的方法将 JSON 对象转换为数组.
这是一个工作plunkr.>
重读以下部分:
><td *ngFor="let key of keys">{{res[key]}}</td></tr>ResultData
是一个项目数组.对于每个项目,我们将创建一个表格行,我们将显示每个项目的内容.这就是为什么我们对数组 ResultData
中的每一项 res
重复 .然后,对于 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]}}
.
这篇关于如何以角度 2 动态设置表格标题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆