Angular 12中如何遍历嵌套数组并在前端正确展示数据？

• *ngFor基础语法错误，正确遍历语法为let 变量 of 待遍历集合，你写的let item of events of event存在语法错误，不符合Angular结构指令的书写规范
• 你提供的JSON是两层数组嵌套结构，外层数组包裹内层数组，内层数组才是存储目标对象的集合，需要两层*ngFor循环才能拿到最终的对象数据
• 管道使用场景错误：json管道作用是将数据序列化为JSON字符串，不能作为遍历的数据源；keyvalue管道适用于遍历对象的键值对，直接用在数组上无法得到预期结果

固定属性名展示 #

如果已知对象的属性为age和gender，可以直接写死属性名读取：

<!-- 第一层遍历外层数组，拿到内层数组 -->
<div *ngFor="let innerArr of event">
  <!-- 第二层遍历内层数组，拿到每个用户对象 -->
  <div *ngFor="let item of innerArr">
    年龄：{{item.age}}，性别：{{item.gender}}
  </div>
</div>

动态遍历所有属性 #

如果需要不写死属性名，自动遍历对象的所有键值对，可搭配keyvalue管道实现：

<div *ngFor="let innerArr of event">
  <div *ngFor="let item of innerArr">
    <!-- 遍历单个对象的所有键值对 -->
    <div *ngFor="let attr of item | keyvalue">
      {{attr.key}}: {{attr.value}}
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Bjorn Liza