18910140161

HTML-动态表格组件,自动列出当前对象数据迭代的每个属性值(ngfor指令)。-堆栈溢出

顺晟科技

2022-10-18 13:42:17

177

说到这一点,我正在创建一个表组件,它接收一个包含动态表所需的所有信息(包括头信息等)的对象。我的任务是让每一行(数据)都成为可能,我的表不需要知道属性名称,只需要直接列出它的值。我做了一些控制台测试,它似乎围绕这些线工作:

<代码>常量数据列表=[{姓名:'尤金',年龄:20,在世:真},{名称:'游戏大师',年龄:40,活着:假},{名称:'骆驼',年龄:22,活着:真}];For(让DataList的数据){console.log(所有数据信息);console.log(数据);for(let PropertyValue of Object.Values(Data)){console.log(属性值);}}

结果:

<块引用>

VM1123:2所有数据信息VM1123:3{姓名:' Eugene ',年龄:20,在世:真}VM1123:6尤金VM1123:6 20 VM123:6真VM1123:2所有数据信息VM1123:3{名称:'游戏大师',年龄:40,活着:假}VM1123:6游戏大师VM1123:6 40 VM1125:6错误VM1123:2所有数据信息VM1123:3{名称:' camel ',年龄:22,活着:真}VM1123:6骆驼VM1123:6 22 VM1125:6真的

我尝试实现相同的结果,但这次在ngfor指令之间迭代,如下所示:
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);
  }
}

但是,问题是我无法访问组件HTML中的“ Object ”类。

<块引用>类型“ PaginationTableComponent ”上不存在

属性“ Object ”。


顺晟科技:

添加方法以获取对象值,如

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

模板中:

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

演示

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航