У меня есть массив объектов с вложенными массивами, как показано ниже. Как я могу распечатать значения вложенного массива в таблице с помощью ngFor. Массив выглядит следующим образом: введите описание изображения здесь

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

Таблица выглядит следующим образом:

   <table class="table table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th>Hours</th>
                    <th>Dates</th>
                    <th>Project Codes</th>
                </tr>
            </thead>
            <tbody class="tbody" *ngFor="let value of array; let i = index">
                <tr *ngFor="let item of array[i].item; let dateValue of array[i].datesArray; let h of array[i].hours">
                    <td>{{h}}</td>
                    <td>{{dateValue}}</td>
                    <td>{{value.projectCodeInput}}</td>
                </tr>
            </tbody>
        </table>

Я использую несколько массивов для одного тега в ngFor как это: {* ngFor = "let item of array [i] .item; let dateValue of array [i] .datesArray; let h of array [i] .hours"} Я знаю, что это неправильно , но каким-то образом часы выводятся в обоих местах, переопределяя значение dateValue во втором столбце.

Есть ли способ распечатать значения из массива часов, dateValue в том же элементе (ТАБЛИЦА)?

0
user13586275 31 Авг 2020 в 23:27

2 ответа

Лучший ответ

Вместо того, чтобы иметь несколько входов для директивы *ngFor, вы можете переместить let i=index во внутренний цикл и использовать его для получения значений.

Я предполагаю, что все подмассивы всегда будут иметь одинаковую длину, т.е. массивы hours, datesArray и item всегда будут иметь одинаковую длину.

Если вы хотите распределить свойство projectCodeInput на несколько строк, поскольку оно будет одинаковым для каждого элемента родительского массива, вы можете сделать это, используя свойство [attr.rowspan] и локальную переменную first для директива *ngFor. Проверка заключается в том, чтобы убедиться, что элемент span отображается только один раз для цикла.

<table class="table table-bordered">
  <thead class="thead-dark">
    <tr>
      <th>Hours</th>
      <th>Dates</th>
      <th>Project Codes</th>
    </tr>
  </thead>
  <tbody class="tbody" *ngFor="let element of arr">
    <tr *ngFor="let item of element.item; let i=index; let f=first">
      <td>{{element.hours[i]}}</td>
      <td>{{element.datesArray[i]}}</td>
      <td *ngIf="f" [attr.rowspan]="element.item.length">{{element.projectCodeInput}}</td>
    </tr>
  </tbody>
</table>

Рабочий пример: Stackblitz

1
Michael D 31 Авг 2020 в 20:48

Вы можете использовать индекс внутреннего цикла и получать значения с этим индексом z:

<table class="table table-bordered">
    <thead class="thead-dark">
        <tr>
            <th>Hours</th>
            <th>Dates</th>
            <th>Project Codes</th>
        </tr>
    </thead>
    <tbody class="tbody" *ngFor="let value of array; let i = index">
        <tr *ngFor="let item of array[i].item; let z = index">
            <td>{{array[i].hours[z]}}</td>
            <td>{{array[i].datesArray[z]}}</td>
            <td>{{value.projectCodeInput}}</td>
        </tr>
    </tbody>
</table>
1
Philipp Kief 31 Авг 2020 в 20:41