在 Angular 中显示对象数组中的字段名称答案

【问题标题】：Displaying Field's Name from the Array of Objects in an Angular在 Angular 中显示对象数组中的字段名称
【发布时间】：2020-05-04 00:13:30
【问题描述】：

只需要显示数组每一行中包含的列名

例如：从控制台

this.GobalTableDataSets
(3) [{…}, {…}, {…}]
0: {centerName: "--", batchName: "MentorSchedule_5D5C", scheduleStartDate: "20-Nov-2019 14:38:17", scheduleEndDate: "20-Dec-2019 14:38:17", …}
1: {centerName: "--", batchName: "MentorSchedule_2657", scheduleStartDate: "20-Nov-2019 10:29:46", scheduleEndDate: "20-Dec-2019 10:29:46", …}
2: {centerName: "--", batchName: "Enroll_cf845bd8-43", scheduleStartDate: "18-Jul-2019 18:32:00", scheduleEndDate: "31-Jul-2019 21:28:00", …}
length: 3

component.ts

this._liveDashboardService.getBatchDetails(orgReqDetailsEx ).subscribe(response => {
   if (response !== null && response.length > 0 && response !== null) {
          this.batchDetails = response;
   }
});

预期结果：

this.GobalTableDataSets[0].<someFunction>
"centerName"
"batchName"
"scheduleStartDate"
"scheduleEndDate"

这里的要求是仅控制台包含来自每行的上述数组的列名（全部或特定名称），但不一定显示/获取包含数组中相应列名的列值

是否有任何来自 Angular 的内置函数来完成上述场景？

【问题讨论】：

标签： angular columnname

【解决方案1】：

只需使用Object.keys():

let keys = Object.keys(this.batchDetails[0]);
console.log(keys);

工作示例：

var list = [
{centerName: "--", batchName: "MentorSchedule_5D5C", scheduleStartDate: "20-Nov-2019 14:38:17", scheduleEndDate: "20-Dec-2019 14:38:17"},{centerName: "--", batchName: "MentorSchedule_2657", scheduleStartDate: "20-Nov-2019 10:29:46", scheduleEndDate: "20-Dec-2019 10:29:46"}
,{centerName: "--", batchName: "Enroll_cf845bd8-43", scheduleStartDate: "18-Jul-2019 18:32:00", scheduleEndDate: "31-Jul-2019 21:28:00"}
];

console.log(Object.keys(list[0]));

【讨论】：

它的工作方式与老式的香草 JS 相同。是否可以通过 Angular 实现相同的目标？

【解决方案2】：

使用下面的代码：

组件.ts

var keys;
this._liveDashboardService.getBatchDetails(orgReqDetailsEx ).subscribe(response => {
   if (response !== null && response.length > 0 && response !== null) {
          this.batchDetails = response;
          keys = Object.keys(this.batchDetails[0])
          console.log(keys);
   }
});

【讨论】：