如何从 Angular 5 中的二维数组打印表格？

Posted 2023-03-13

【中文标题】如何从 Angular 5 中的二维数组打印表格？

【英文标题】：How to print a table from a 2D Array in Angular 5?

【发布时间】：2018-05-26 06:57:47

【问题描述】：

我正在尝试从二维对象数组中打印一个表格，其中包含一个属性“文本”。它只打印表格行，遍历字段不起作用。

我的 component.html 看起来像这样：

<section *ngIf="object">
    <table>
      <tr *ngFor="let row of array; let even = even; let odd = odd"
          [ngClass]=" odd: odd, even: even ">
        <td class="field" *ngFor="let field of array[row]">
          field.text
        </td>
      </tr>
    </table>
  </section>

数组：object[][] 已正确填充，我可以将“文本”属性记录到控制台。问题是：我不知道如何遍历第二维 (*ngFor="let field of array[row]")

【问题讨论】：

小注解，你不需要为你的元素添加奇数/偶数类，你可以使用纯 CSS：table > tr:nth-of-type(odd)

【参考方案1】：

假设array是一个数组数组，

您的第二个ngFor 应该是*ngFor="let field of row"

您不能使用array[row]，因为row 包含第二维数组而不是索引。

<section *ngIf="object">
    <table>
      <tr *ngFor="let row of array; let even = even; let odd = odd"
          [ngClass]=" odd: odd, even: even ">
        <td class="field" *ngFor="let field of row">
          field.text
        </td>
      </tr>
    </table>
  </section>

Example