Question

当前，我有一个带有硬编码的列标题并填充数据的数据表。我想更改此表使其动态，以便用户可以选择要构建表的列。我想知道我将如何或以何种方式更改json对象，以确保创建动态列数据表。

这是我尝试过的但未加载数据。

<table>
  <thead>
    <tr>
      <th *ngFor="let col of columnArray">{{col}}</th>
    </tr>
  </thead>
<table>
<tbody>
   <tr *ngFor="let col of columnArray">
      <td *ngFor="let data of columnData"> {{col.data}} </td>
   </tr>
</tbody>

当前，由于我的表格数据来自一个带有硬编码标题的对象，因此这是我当前的工作对象：

data = [ {'id': 'idValue', 'name': 'nameValue', 'date': 'dateValue', 'description': 'descriptionValue'}, ...
]

但是由于我不知道用户将选择哪些列来创建表，因此它可能是列：id，名称，描述。或栏：编号，名称。我需要灵活的数据，以便用户选择要在表中显示的列

Answer 1

数据的工作格式：

columnArray = [ {'header': 'headerValue', 'data': 'dataValue'}, ...
]

然后模板可以是：

<table>
    <thead>
       <tr><th *ngFor="let col of columnArray">{{col.header}}></th></tr>
    </thead>
    <tbody>
        <tr>
           <td *ngFor="let col of columnArray"> {{col.data}} </td>
        </tr>
    </tbody>
</table>

如果可以提供数据格式，则可以提供更多合适的解决方案。

EDIT＃1：

根据您的数据格式，我将从数据数组中的对象中提取标头的键。

headers = Object.keys(data[0]);

然后html应该是：

<table>
   <thead>
      <tr><th *ngFor="let col of headers">{{col}}></th></tr>
   </thead>
   <tbody>
      <tr *ngFor="let obj of data">
         <td *ngFor="let col of headers"> {{obj[col]}} </td>
      </tr>
   </tbody>
</table>

角度2动态列数据表

1 个答案: