如何从嵌套对象数组中检索值 angular

Question

我有一个包含嵌套数组的对象数组，如下所示。如何使用 ngFor 在 table 中打印嵌套数组值。该数组如下所示：

我正在使用 table 打印此值，因此我可以将 table 导出到 Excel sheet.

table 看起来如下：

   <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="让数组 [i].item 的项目；让数组 [i].datesArray 的 dateValue；让数组 [i].hours 的 h"} 我知道这是错误的方式，但不知何故，小时数在两个地方的输出中都打印出来，覆盖了第二列中的日期值。

有没有办法在同一元素(TABLE)中打印 hours、dateValue 数组的值？

Answer 1

您可以使用内部循环的索引并获取具有该索引的值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>

Answer 2

您可以将 let i=index 移动到内部循环并使用它来获取值，而不是对 *ngFor 指令进行多个输入。

我假设所有 sub-arrays 将始终等长，即 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

如何从嵌套对象数组中检索值 angular

how to retrieve the value from nested object arrays angular

html

arrays

angular

ngfor