Question

我正在将大量的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数组中重复。

Answer 1

那是因为您要对表主体*ngFor内的列执行两个tr。

如果数据始终具有相同的列，只需对其进行硬编码（列不需要*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>

Answer 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>

只需进行这些更改。

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

2 个答案: