自动列出当前 Object 数据迭代的每个属性值的动态表组件（ngFor 指令）；

Posted 2023-02-23

【中文标题】自动列出当前 Object 数据迭代的每个属性值的动态表组件（ngFor 指令）；

【英文标题】：Dynamic table component that automatically list each property value of the current Object data iteration (ngFor directive);

【发布时间】：2021-11-17 07:44:25

【问题描述】：

言归正传，我正在创建一个表格组件，它接收一个包含动态表格所需的所有信息的对象，包括头部信息等。我的任务是让每一行（数据）都成为可能，我的表不需要知道属性名称，只需立即列出它的值。 我做了一些控制台测试，它似乎可以解决这些问题：

const dataList = [
   name: 'Eugene', age: 20, alive: true ,
   name: 'Game Master', age: 40, alive: false ,
   name: 'Camel', age: 22, alive: true 
];


for(let data of dataList) 
  console.log("All data info");
  console.log(data);

  for(let propertyValue of Object.values(data)) 
    console.log(propertyValue);
  

结果：

VM1123:2 所有数据信息 VM1123:3 name: 'Eugene', age: 20, alive: 真 VM1123:6 尤金 VM1123:6 20 VM1123:6 真 VM1123:2 所有数据信息 VM1123:3 name: 'Game Master', age: 40, 活着：假 VM1123:6 游戏大师 VM1123:6 40 VM1123:6 false VM1123:2 所有数据信息 VM1123:3 name: 'Camel', age: 22，活着：真 VM1123:6 骆驼 VM1123:6 22 VM1123:6 真的

我试图达到相同的结果，但这次在 ngFor 指令之间进行迭代，如下所示：

<tr *ngFor="let data of tableConfig.data; let i = index">
  <td *ngFor="let propValue of Object.values(data)">  propValue </td>

但是，问题是我无法访问组件 html 中的“对象”类。

“PaginationTableComponent”类型上不存在属性“对象”。

【参考方案1】：

添加方法来获取您的对象值，例如

getValues(data): any
  return Object.values(data);

在模板中：

<td *ngFor="let propValue of getValues(data)">  propValue </td>

Demo