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

Question

进入正题，我正在创建一个 table 组件，它接收一个对象，其中包含动态 table 需要的所有信息，包括头部信息等。我的任务是让每一行（数据）成为可能，我的 table 不需要知道属性名称，只需要直接列出它的值。

我做了一些控制台测试，它似乎可以解决这些问题：

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 All data info
VM1123:3 {name: 'Eugene', age: 20, alive: true}
VM1123:6 Eugene
VM1123:6 20
VM1123:6 true
VM1123:2 All data info
VM1123:3 {name: 'Game Master', age: 40, alive: false}
VM1123:6 Game Master
VM1123:6 40
VM1123:6 false
VM1123:2 All data info
VM1123:3 {name: 'Camel', age: 22, alive: true}
VM1123:6 Camel
VM1123:6 22
VM1123:6 true

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

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

但是，问题是我无法访问组件 HTML.

中的 'Object' class

Property 'Object' does not exist on type 'PaginationTableComponent'.

Answer 1

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

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

在模板中：

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

Demo

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

Dynamic table component that automatically list each property value of the current Object data iteration (ngFor directive);

html

components

object

ngfor

angular

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

Dynamic table component that automatically list each property value of the current Object data iteration (ngFor directive);

html

components

object

ngfor

angular

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