Angular：如何在*ngFor循环中仅显示特定日期的首个元素

嘿，恭喜你在Stack Overflow提第一个问题！这个需求其实很常见，我给你两个简单易上手的实现思路：

方法1：组件内预处理数据（推荐） #

这种方法会先在组件里过滤掉重复日期的条目，只保留每个日期的第一个实例，模板逻辑会更简洁，性能也更优。

在你的组件TypeScript代码里添加这段处理逻辑：

// 假设w.event是你的原始事件数组
this.uniqueDateEvents = this.w.event.reduce((accumulator, currentEvent) => {
  // 将日期转换为YYYY-MM-DD格式的字符串，确保只按日期（不含时间）去重
  const currentDateStr = currentEvent.date.toISOString().split('T')[0];
  // 检查 accumulator 里是否已经存在该日期的事件
  const hasSameDate = accumulator.some(event => 
    event.date.toISOString().split('T')[0] === currentDateStr
  );
  // 不存在则加入数组
  if (!hasSameDate) {
    accumulator.push(currentEvent);
  }
  return accumulator;
}, [] as typeof this.w.event);

然后在模板里循环处理后的数组：

<div *ngFor="let d of uniqueDateEvents">
  <div class="date" id="{{d.date | date:'yyyy-MM-dd'}}">
    <p>
      <span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
      <br>
      <strong>&nbsp;{{d.date | date:'EEE'}}</strong>
    </p>
  </div>
</div>

这个方法的优点是过滤逻辑只执行一次，模板干净易懂，而且每个div的id会是唯一的（比如id="2024-05-20"），完全符合HTML规范。

方法2：模板内直接判断（无需修改组件数据） #

如果你不想改动组件的数据，可以直接在模板里用*ngIf结合findIndex来判断当前项是否是该日期的第一个实例：

<div *ngFor="let d of w.event; let i = index">
  <div 
    class="date" 
    id="{{d.date | date:'yyyy-MM-dd'}}"
    *ngIf="w.event.findIndex(item => item.date.toISOString().split('T')[0] === d.date.toISOString().split('T')[0]) === i"
  >
    <p>
      <span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
      <br>
      <strong>&nbsp;{{d.date | date:'EEE'}}</strong>
    </p>
  </div>
</div>

这里的逻辑是：findIndex会返回当前日期第一次出现的索引，只有当循环的当前索引i等于这个索引时，才渲染该div。

⚠️ 小提醒：你原来的id="d.date"写法是错误的，没有生效，应该用插值表达式id="{{d.date | date:'yyyy-MM-dd'}}"来生成唯一的id，避免HTML里出现重复id的问题。

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