Angular 4中如何统计progressList里已完成的Level 1测验数量？

你现在的代码思路明显走偏啦——用slice:0:1只取了数组的第一个元素，再用*ngIf判断它是不是Level 1，这根本没法统计所有符合条件的项数量。我给你两种简单靠谱的解决方案：

方案一：在组件类中计算统计值（推荐） #

这种方式性能更好，尤其是当progressList数据量较大时，能避免模板里重复执行过滤逻辑。

首先在组件的.ts文件里添加一个计算属性：

// 假设你的progressList每个项包含level（等级）和completed（完成状态）字段
get completedLevel1Count(): number {
  // 过滤出等级为1且已完成的项，返回其总数
  return this.progressList.filter(item => item.level === 1 && item.completed).length;
}

然后在模板里直接调用这个属性展示数量：

<div align="center">
  <p>已完成的Level 1测验数量: {{ completedLevel1Count }}</p>
</div>

方案二：在模板中直接过滤（适合简单场景） #

如果数据量很小，也可以直接在模板里用数组的filter方法，但要注意如果是异步加载的数据（比如从接口获取），需要加安全导航符?.避免报错：

<div align="center">
  <p>已完成的Level 1测验数量: {{ progressList?.filter(item => item.level === 1 && item.completed).length }}</p>
</div>

额外说明：如果还要展示每个符合条件的测验 #

如果除了统计数量，还要列出所有已完成的Level 1测验，可以先在组件里过滤出目标数组：

filteredLevel1Completed: any[] = [];

ngOnInit(): void {
  // 若progressList是异步获取的，要在数据返回后再执行这行代码
  this.filteredLevel1Completed = this.progressList.filter(item => item.level === 1 && item.completed);
}

然后在模板里同时展示数量和列表：

<div align="center">
  <p>已完成的Level 1测验数量: {{ filteredLevel1Completed.length }}</p>
  <div *ngFor="let quiz of filteredLevel1Completed; let i = index">
    <p>测验 {{i+1}}: {{ quiz.name }}</p> <!-- 替换成你实际要展示的字段 -->
  </div>
</div>

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