使用 Angular NgFor 用 JSON 数组中的数据填充 html 数据表答案

【问题标题】：Using Angular NgFor to fill html data table with data from JSON array使用 Angular NgFor 用 JSON 数组中的数据填充 html 数据表
【发布时间】：2018-10-23 07:29:33
【问题描述】：

我正在将大量的 Excel 电子表格翻译成 json，然后构建一个工具来格式化数据并将其用于分析。

在上传过程中，我向用户展示了他们所有数据的视图。我在格式化表格时遇到了一些麻烦，我希望这里有人可以帮助解释这个问题：

在 html 中使用标准数据表时，我可以在硬编码时轻松获得我想要的结果：

<div style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th style="color: black" *ngFor="let label of lineChartLabels">{{label}}</th>
      </tr>
      <tr *ngFor="let d of XLSData">
        <td>This is in Column 1</td>
        <td>And this is in Column 2</td> 
      </tr>
    </table>
  </div>

我明白了：但是当用 NgFor 填充行时，我会得到每列重复的数据：

<div style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th style="color: black" *ngFor="let label of lineChartLabels">{{label}}</th>
      </tr>
      <tr *ngFor="let d of XLSData">
        <td style="color: black" *ngFor="let label of lineChartLabels">Time: {{d.Time | json}}</td>
        <td style="color: black" *ngFor="let label of lineChartLabels">Empty: {{d.__EMPTY | json}}</td>
      </tr>
    </table>
  </div>

我明白了：

我不明白为什么循环会用相同的数据填充每一列可用的数据，因为数据不会在 JSON 数组中重复。

【问题讨论】：

标签： angular typescript html-table

【解决方案1】：

那是因为您在表格主体的tr 内的列上执行了两个*ngFor。

如果您的数据始终具有相同的列，只需对其进行硬编码（列不需要 *ngFor）：

<div style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th style="color: black">Time</th>
        <th style="color: black">__EMPTY</th>
      </tr>
      <tr *ngFor="let d of XLSData">
        <td style="color: black">Time: {{ d.Time | json }}</td>
        <td style="color: black">Empty: {{ d.__EMPTY | json }}</td>
      </tr>
    </table>
</div>

如果您的列是动态的，那么您需要在列上*ngFor：

<div style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th style="color: black" *ngFor="let label of lineChartLabels">
          {{ label }}
        </th>
      </tr>
      <tr *ngFor="let d of XLSData">
        <td style="color: black" *ngFor="let label of lineChartLabels">
          <!-- Note that I'm assuming here that your label is the same of your field name on `d`. If is not, you will need to better structure your code -->
          {{ d[label] | json }}
        </td>
    </table>
</div>

【讨论】：

您的第二个答案绝对是正确的方法。我误读了 ngFor 的用法。

【解决方案2】：

您使用 ngFor 的方式是错误的。 ngFor 将迭代使用索引明确提到的次数或循环对象中存在的元素数量。在您的情况下，有两个元素，因此它重复了两次。

  <tr>
    <th style="color: black" *ngFor="let label of lineChartLabels">{{label}}</th>
  </tr>
  <tr *ngFor="let d of XLSData">
    <td style="color: black">Time: {{d.Time | json}}</td>
    <td style="color: black">Empty: {{d.__EMPTY | json}}</td>
  </tr>

只需进行这些更改。

【讨论】：