Использование Angular NgFor для заполнения таблицы данных html данными из массива JSON - PullRequest
Новая
       25

Использование Angular NgFor для заполнения таблицы данных html данными из массива JSON

0 голосов
/ 23 октября 2018

Я перевожу массивные таблицы 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>

И я получаю это: correctTables Но при заполнении строк с помощью 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>

Я получаю это: wrongTables

Я не понимаю, почему цикл заполняет все доступные столбцы одинаковыми данными, поскольку данные не повторяются в массиве JSON.

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

То, как вы используете 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>

Просто внесите эти изменения.

0 голосов
/ 23 октября 2018

Это потому, что вы делаете два *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>
...