如何在HTML中获取ngFor循环的总行数并在表格上方显示？

嘿，这两个问题其实可以用同一个简单思路解决——因为*ngFor是遍历你的list数组，循环的总行数就是这个数组的长度呀！

问题1：获取ngFor循环的总行数 #

你不需要在ngFor里做额外的特殊处理，直接访问list.length就能拿到循环的总行数。如果你的数组可能为null或undefined，推荐用可选链操作符?.避免报错，也就是写成list?.length。

问题2：在表格上方显示总行数 #

直接修改你提供的<p>标签内容，把占位文本替换成{{ list?.length }}即可。下面是修改后的完整代码：

<p>Total row: {{ list?.length }}</p>
<table class="table" >
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr *ngFor="let l of list">
    <td>{{l.id}}</td>
    <td>{{l.name}}</td>
  </tr>
</table>

额外小提示 #

如果你的list是异步加载的（比如从API接口获取），可以结合async管道使用，假设你的异步数据流是list$，那行数就写成{{ (list$ | async)?.length }}，这样能确保数据加载完成后再显示正确的行数。

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