如何在角度 12 中迭代数组？答案

【问题标题】：How to iterate over arrays in angular 12?如何在角度 12 中迭代数组？
【发布时间】：2021-11-16 01:47:41
【问题描述】：

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

我试过这个方法：

<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"
        }
    ]
]

【问题讨论】：

插入一个中间 ng-container 怎么样？

标签： arrays json angular angular12

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

它看起来像一个嵌套数组，尝试使用多个 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>

【讨论】：

由于 OP 可能不想要无用的 DOM 元素，因此在第一层迭代中使用 <ng-container> 而不是 <div> 可能会更好
绝对有可能@ArnaudDenoyelle，你应该创建一个答案来表明这一点。

【解决方案3】：

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

【讨论】：

非常感谢。我赞成你的回答:-)