创建一个函数以将数据数组动态转换为表的列标题

Question

我想要做的是获取对象的数据数组并创建一个函数，我可以在其中传递数据并动态呈现列标题和行。这是我的示例数据：

 let revisions = [
        {
          car: {
            id: 1000,
            header: "Toyota"
          },
          revisionDate: {
            header: "Revision Date",
            newValue: "08/24/2021",
            oldValue: "09/15/2020"
          },
          revisionType: {
            header: "Revision Type",
            newValue: "Tool Desc.",
            oldValue: "Tool Number"
          },
          revisionNote: {
            header: "Revision Note",
            newValue: "Delete",
            oldValue: "Delete"
          },
          workStation: {
            header: "Garage",
            newValue: "New garage",
            oldValue: "Old garage"
          }
        }

对于我的函数，我尝试使用 2 个 for 循环，但是我似乎无法弄清楚如何获取数组中的属性。我试过的：

getHeaders(revisions) {
    var prop;
    var rowProp;
    for (rowProp = 0; rowProp < revisions.length; rowProp++)
      if (rowProp >= 0) {
        gridData.push({ header: revisions.header });
      }
    for (prop = 0; prop < revisions.length; prop++) {
      if (prop === "oldValue") {
        gridData.push({ field: "revisionDate", header: revisions.header + " (Existing)" });
      }
      if (prop === "newValue") {
        gridData.push({ field: "revisionDateNew", header: revisions.header + " (New)" });
      }
      else {
        gridData.push(revisions);
      }
    }
    return gridData;
  }

这是html以防万一：

      <tr>
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>

感谢您的帮助。

Answer 1

如果你的对象保持不变：

{
 car:{...},
 revisionDate:{...},
 revisionType:{...},
 revisionNote:{...},
 workStation:{...}
}

那么您甚至不需要构建一个函数来在表格中显示该数据，这是您可以做的表格布局：

 <table>
  <th class="row" >
    <div class="col-2">{{ revisions[0].car.header }}</div>
    <div class="col-2">{{ revisions[0].revisionDate.header }}</div>
    <div class="col-2">{{ revisions[0].revisionType.header }}</div>
    <div class="col-2">{{ revisions[0].revisionNote.header }}</div>
    <div class="col-2">{{ revisions[0].workStation.header }}</div>
  </th>
  <td class="row" *ngFor="let rev of revisions">
    <div class="col-2">{{ rev.car.id }}</div>
    <div class="col-2">{{ rev.revisionDate.newValue }}</div>
    <div class="col-2">{{ rev.revisionType.newValue }}</div>
    <div class="col-2">{{ rev.revisionNote.newValue }}</div>
    <div class="col-2">{{ rev.workStation.newValue }}</div>
  </td>
</table>

revisions[0] 用于获取第一个对象并访问标题以进行显示。然后，您使用 *ngFor="" 循环遍历每个对象并显示这些元素中的数据。