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

我想将所有键设置为表标题，将数据设置为表行。我参考了下面的链接

链接2：

---

任何Plunk都会对我很有帮助。

关键的解决方案是将对象

ResultData

转换为一个键数组。然后您可以轻松地对其进行迭代。您可以使用

object.keys（this.ResultData）

获取对象的键

组件技术

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{key}}
{{res[key]}
`,
})
导出类应用程序{
名称：字符串；
结果数据=[
{
“名字”：“xx”，
“电子邮件”：“xxxx”，
“电话”：“xxx”，
“国家代码”：“+91”，
“订单日期时间”：“xxx”，
“地位”：11，
“设备类型”：3，
“订单ID”：“59081a04c9ff6852a49dd32a”，
“orderseqId”：“E00002347”，
“订单类型”：1，
“客户ID”：“xx”，
“pickAddress”：“xx”，
“dropAddress”：“xx”，
“纬度”：17.4369414，
“水滴度”：17.43673，
“液滴长度”：78.36710900000003，
“paymentType”：2，
“项目描述”：“，
“接管人姓名”：“uday”，
“接收方电话”：“xx”，
“项目名称”：“sanjay”，
“送货费”：“199”，
“bookingType”：1
} 
]
构造函数（）{
}
键：字符串[]=[]；
ngOnInit（）{
this.keys=Object.keys（this.ResultData[0]）
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

这有一种替代方法，可以使用管道将JSON对象转换为数组

这里有一个

关于以下部分：

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

{{res[key]}

ResultData

是一个项目数组。对于每个项目，我们将创建一个表行，并显示每个项目的内容。这就是为什么我们对数组

ResultData

中的每个项目

res

重复

---

然后，对于

ResultData

中的每个项目

res

，我们将迭代前面在ts代码中准备的

键数组。对于
keys
中的每个项目
key
，我们将项目的值显示为
{{res[key]}
关键解决方案是将对象
ResultData
转换为一个键数组。然后您可以轻松地对其进行迭代。您可以使用
object.keys（this.ResultData）
获取对象的键

组件技术

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{key}}
{{res[key]}
`,
})
导出类应用程序{
名称：字符串；
结果数据=[
{
“名字”：“xx”，
“电子邮件”：“xxxx”，
“电话”：“xxx”，
“国家代码”：“+91”，
“订单日期时间”：“xxx”，
“地位”：11，
“设备类型”：3，
“订单ID”：“59081a04c9ff6852a49dd32a”，
“orderseqId”：“E00002347”，
“订单类型”：1，
“客户ID”：“xx”，
“pickAddress”：“xx”，
“dropAddress”：“xx”，
“纬度”：17.4369414，
“水滴度”：17.43673，
“液滴长度”：78.36710900000003，
“paymentType”：2，
“项目描述”：“，
“接管人姓名”：“uday”，
“接收方电话”：“xx”，
“项目名称”：“sanjay”，
“送货费”：“199”，
“bookingType”：1
} 
]
构造函数（）{
}
键：字符串[]=[]；
ngOnInit（）{
this.keys=Object.keys（this.ResultData[0]）
}
}
@NGD模块({
导入：[BrowserModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

这有一种替代方法，可以使用管道将JSON对象转换为数组

这里有一个

关于以下部分：

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


{{res[key]}

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

然后，对于
ResultData
中的每个项目
res
，我们将迭代前面在ts代码中准备的
键数组。对于
key
中的每个项
key
我们将显示项的值为
{res[key]}
我创建了一个管道，但它只在tr中打印表标题我创建了一个管道，但它只在tr中打印表标题我得到了表标题，如0,1,2，…但我想要表标题，如First_name，Email，电话..像这样。提前谢谢谢谢谢谢先生，你救了我。我已经标记为正确答案。但是我的声誉低于15，先生，如果你不介意{{res[key]}}@AmrElAdawy，你能解释一下这些行吗。我正在研究动态加载表头和数据的类似需求。但是{res[key]}}不起作用。当我用{res[“name”]}代替键时，实际的字段名可以用单引号或双引号引起来。。{{res[“podName”]}{{res[key]}}我得到的表格标题是0,1,2，……但我想要的表格标题是名字、电子邮件、电话……像这样。提前谢谢谢谢谢谢谢谢先生，你救了我。我已经标记为正确答案。但是我的声誉低于15，先生，你能解释一下吗