Angular：如何在HTML页面显示对象数组的长度

你当前的代码问题出在访问了单个对象的length属性，而不是数组本身的length。

为什么页面没有显示？ #

在你的*ngFor循环里，hero是heros数组中的单个元素（比如{"name":"batman", "id":"A1001"}），这是一个对象，对象并没有length属性，所以{{hero.length}}会输出undefined，页面自然看不到任何内容。而且就算能显示，也会因为循环重复显示三次，这显然不是你想要的“总数量”效果。

正确的写法 #

1. 单独显示总英雄数量（推荐）

直接在*ngFor循环外面或者页面任意位置使用{{heros.length}}，不需要嵌套在循环里：

<!-- 先显示总数量 -->
<div>Number of heros are {{heros.length}}</div>

<!-- 再遍历每个英雄显示详情 -->
<div *ngFor="let hero of heros">
  <div>Name: {{hero.name}}, ID: {{hero.id}}</div>
</div>

2. 若需在循环内显示总数量（特殊场景）

如果因为需求必须在每个英雄项旁显示总数量，直接访问数组的length即可：

<div *ngFor="let hero of heros">
  <div>Hero: {{hero.name}}</div>
  <div>Total heros: {{heros.length}}</div>
</div>

额外注意事项 #

确保你的组件中已经正确初始化了heros数组：

// 组件类中的代码示例
export class YourComponent {
  heros = [
    { "name":"batman", "id":"A1001" },
    { "name":"superman", "id":"A1002" },
    { "name":"spiderman", "id":"A1003" }
  ];
}

如果heros是通过异步请求获取的（比如HTTP请求），记得用async管道确保数据加载完成后再访问：

<div *ngIf="heros$ | async as heros">
  <div>Number of heros are {{heros.length}}</div>
  <div *ngFor="let hero of heros">
    <div>{{hero.name}}</div>
  </div>
</div>

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