Angular中如何仅通过*ngFor与*ngIf按dob分类展示列表并显示标题？

可以仅用*ngFor和*ngIf在模板中完成需求，核心思路是利用索引判断分组的起始项，再遍历筛选同组成员。以下是具体实现代码：

假设组件中定义的数组变量名为employees，模板代码如下：

<div *ngFor="let emp of employees; let i = index">
  <!-- 仅在当前项是分组第一个元素时渲染分组标题和成员列表 -->
  <div *ngIf="i === 0 || employees[i].dob !== employees[i-1].dob">
    <strong>Year {{ emp.dob }}</strong>
    <!-- 遍历所有元素，筛选出当前分组的成员 -->
    <span *ngFor="let member of employees; let j = index">
      <span *ngIf="j >= i && member.dob === emp.dob">{{ member.name }} </span>
    </span>
  </div>
</div>

逻辑说明 #

1. 外层*ngFor遍历所有员工数据，通过索引i判断当前项是否为分组的起始项（要么是第一个元素，要么与前一个元素的dob不同）。
2. 当确认是分组起始项时，先渲染分组标题Year {{ emp.dob }}。
3. 内层*ngFor再次遍历所有数据，通过j >= i和member.dob === emp.dob筛选出当前分组的所有成员，依次显示名字。

注意事项 #

• 该方案仅适用于同dob的元素在数组中连续相邻的场景（匹配你给出的数据结构和需求）。
• 若数据量较大，内层重复遍历会带来一定性能损耗，此时建议在组件内预处理分组数据，但小规模数据下纯模板方案完全可用。

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