如何在Angular的div标签中显示带数字索引的testData对象

嘿，我来帮你搞定这个Angular里展示数据的问题！你的testData结构有点特殊——是一个数组，里面嵌套了一个以数字为键的对象。下面给你两种实用的展示方式：

方式一：直接用keyvalue管道遍历（保留原数字键） #

组件代码（无需额外修改） #

首先，你的组件里已经定义了testData：

testData: any = [
  {
    "0": { "id":"1", "name":"Mandatory Learning FY_201" },
    "1": { "id":"2", "name":"Mandatory Learning FY_202" },
    "2": { "id":"1", "name":"Mandatory Learning FY_203" },
    "3": { "id":"2", "name":"Mandatory Learning FY_204" },
    "4": { "id":"1", "name":"Mandatory Learning FY_205" }
  }
];

模板代码 #

在HTML的div里，我们先取数组的第一个元素（testData[0]），再用Angular的keyvalue管道把对象的键值对转成可遍历的数组：

<div class="learning-list">
  <h3>Mandatory Learning Items</h3>
  <!-- 遍历testData[0]的键值对 -->
  <div *ngFor="let entry of testData[0] | keyvalue" class="learning-item">
    <p><strong>Original Index:</strong> {{ entry.key }}</p>
    <p><strong>ID:</strong> {{ entry.value.id }}</p>
    <p><strong>Name:</strong> {{ entry.value.name }}</p>
    <hr>
  </div>
</div>

keyvalue管道会把每个数字键和对应的学习项转换成一个包含key（原数字索引）和value（学习项对象）的对象，这样就能轻松遍历展示了。

方式二：先在组件中处理数据（更简洁的数组结构） #

如果觉得原结构有点绕，也可以先在组件里把数据转换成普通数组，再展示：

组件代码 #

在组件里添加一个处理后的数据属性，并在初始化时转换：

testData: any = [
  {
    "0": { "id":"1", "name":"Mandatory Learning FY_201" },
    "1": { "id":"2", "name":"Mandatory Learning FY_202" },
    "2": { "id":"1", "name":"Mandatory Learning FY_203" },
    "3": { "id":"2", "name":"Mandatory Learning FY_204" },
    "4": { "id":"1", "name":"Mandatory Learning FY_205" }
  }
];
processedData: any[] = [];

ngOnInit(): void {
  // 提取testData[0]的所有值，转换成普通数组
  this.processedData = Object.values(this.testData[0]);
}

模板代码 #

现在模板里直接遍历处理后的数组就行，还能用上Angular的循环索引：

<div class="learning-list">
  <h3>Mandatory Learning Items</h3>
  <div *ngFor="let item of processedData; let i = index" class="learning-item">
    <p><strong>Index:</strong> {{ i }}</p>
    <p><strong>ID:</strong> {{ item.id }}</p>
    <p><strong>Name:</strong> {{ item.name }}</p>
    <hr>
  </div>
</div>

这种方式的好处是数据结构更直观，模板代码也更简洁。

两种方式都能完美展示你的数据，选哪种就看你是否需要保留原有的数字键啦～

内容的提问来源于stack exchange，提问作者hukam bhardwaj