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

Question

我成功地循环抛出值为对象数组的对象。下面是对象：

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

我可以在 table 中填充数据，如下所示：

下面是我的模板代码：

 <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>

这是我的问题： 我的用例表明我应该能够填充多个 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" }
    ]
  }
];

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

  <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中获取。所以要显示的 table 的数量将在运行时决定。

提前致谢！

Answer 1

打字稿的问题，Angular不知道“object.value”是什么对象，说你不能迭代(*)。

你可以帮助 typeScript 声明接口

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

并将您的变量声明为

testObj3:TableDef[];

你的forked stackblitz

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

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

How to fetch complex array of object (whose value is gain an array of object) using *ngFor

json

angular

frontend

ngfor