如何使用 *ngFor 获取复杂的对象数组（其值是获取对象数组）答案

【问题标题】：How to fetch complex array of object (whose value is gain an array of object) using *ngFor如何使用 *ngFor 获取复杂的对象数组（其值是获取对象数组）
【发布时间】：2021-06-04 19:18:48
【问题描述】：

我成功循环了值为对象数组的 throw 对象。下面是对象：

this.testObj2 = {
  nodeFour: [
    { elementOne: "B Street" },
    { elementTwo: "city" },
    { elementThree: "Area-591323" },
    { elementFour: "something" }
  ]
}

我能够填充表格中的数据，如下所示：

下面是我的模板代码：

 <table class="table">
  <thead>
    <tr>
      <ng-container *ngFor="let obj of testObj2 | keyvalue">
        <ng-container *ngFor="let ts1 of obj.value">
          <th *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.key }}</th>
        </ng-container>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <tr>
      <ng-container *ngFor="let obj of testObj2 | keyvalue">
        <ng-container *ngFor="let ts1 of obj.value">
          <td *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.value }}</td>
        </ng-container>
      </ng-container>
    </tr>
    <tr>
  </tbody>
</table>

这是我的问题： 我的用例表明我应该能够填充多个表。我坚持这一点。我假设 *ngFor 应该是理想的。下面是我必须填充的示例数据结构（基本上是上面数据结构的数组）：

this.testObj3 = [
  {
    nodeFour: [
      { elementOne: "B Street" },
      { elementTwo: "city" },
      { elementThree: "Area-591323" },
      { elementFour: "something" }
    ]
  },
  {
    nodeFive: [
      { elementOnee: "Bla Street" },
      { elementTwoo: "Hondacity" },
      { elementThreee: "someArea-591323" },
      { elementFourr: "somethingIsAlwaysHappening" }
    ]
  }
];

我需要在两个不同的表中填充它，一个用于“nodeFour”，另一个用于“nodeFive” 下面是我试过的模板sn-p：

  <div>
    <ng-container *ngFor="let TObj2 of testObj3; trackBy: trackByFn;" >
        <table class="table">
            <thead>
                <tr>
                    <ng-container *ngFor="let obj of TObj2 | keyvalue">
                        <ng-container *ngFor="let ts1 of obj.value">
                            <th *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.key }}</th>
                        </ng-container>
                    </ng-container>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <ng-container *ngFor="let obj of TObj2 | keyvalue">
                        <ng-container *ngFor="let ts1 of obj.value">
                            <td *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.value }}</td>
                        </ng-container>
                    </ng-container>
                </tr>
                <tr>
            </tbody>
        </table>
    </ng-container>
</div>

下面一行出现错误：

<ng-container *ngFor="let ts1 of obj.value">

以下是错误：

有人可以帮我解决这个问题吗？在我的实际需求中，上述数据结构的数据将在运行时从 API 中获取。所以要显示的表格数量将在运行时决定。

提前致谢！

【问题讨论】：

标签： json angular frontend ngfor

【解决方案1】：

这是打字稿的问题，Angular不知道“object.value”是什么类型的对象并说你不能迭代（*）。

你可以帮助 typeScript 声明一个接口

export interface TableDef{
  [key: string]:any[]
}

并将你的变量声明为

testObj3:TableDef[];

你的forked stackblitz

(*) 如果你在声明对象时给它赋值，TypeScript 不会显示错误

【讨论】：

非常感谢您的回答。它解决了我的问题。再次感谢！