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

Question

我正在尝试从二维对象数组中打印一个 table，其中包含一个属性 'text'。它只打印 table 行，遍历字段不起作用。

我的 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[][] 已正确填充，我可以将 'text' 属性记录到控制台。问题是：我不知道如何遍历第二个维度 (*ngFor="let field of array[row]")

Answer 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

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

How to print a table from a 2D Array in Angular 5?

html

arrays

typescript

angular5