如何遍历 angular 12 中的数组？

Question

我正在尝试遍历数组数组中的对象，但是，我无法在前端显示数据。

我试过这个方法：

<div *ngFor="let item of events of event | keyvalue">
    {{item.key}}:{{item.value}}
</div>

还有这个：

<div *ngFor="let item of events of event | json">
   Test: {{item}}
</div>

JSON 数据的结构以此格式给出。

[
    [
        {
            "age": "age3",
            "gender": "gender3"
        },
        {
            "age": "age3",
            "gender": "gender3"
        }
    ]
]

Answer 1

它看起来像一个嵌套数组，尝试使用多个 ngFor:

<div *ngFor="let event of events">
  <div *ngFor="let item of event">
    Test: {{item | json}}
  </div>
</div>

否则您可以尝试使用 Array.prototype.flat 来展平嵌套数组：

this.flattened = this.events.flat();

// ...

<div *ngFor="let item of flattened">
  Test: {{item | json}}
</div>

Answer 2

<ng-container> 当您想要结构逻辑而不用无用元素污染 DOM 时很好。

<ng-container *ngFor="let subArray of array"> <!-- This does not appear in the DOM -->
  <div *ngFor="let item of subArray"> <!-- This appears in the DOM -->
    {{item.key}}:{{item.value}}
  </div>
</ng-container>

Answer 3

您还必须遍历每个内部数组，因此您需要一个嵌套的 *ngFor。确保在嵌套的 *ngFor.

中引用正确的 item 数组

<div *ngFor = "let item of events">
    <div *ngFor = "let x of item">
        {{x.age}}:{{x.gender}}
    </div>
</div>

如何遍历 angular 12 中的数组？

How to iterate over arrays in angular 12?

arrays

json

angular

angular12