Angular中使用ngFor按专科分类医生列表时相同标题重复问题如何解决？

方案1：预处理数据按专科分组（推荐，稳定性高） #

这个方案不受原始医生数组的顺序影响，不会出现重复标题。

步骤1：在组件ts文件中对医生数组按专科分组 #

// 先定义Doctor类型（如果没有定义过可以加）
interface Doctor {
  doctorName: string;
  doctorSpeciality: string;
  // 补充你的其他医生字段
}

// 组件内新增属性，存储分组后的数据
groupedDoctors: Array<{speciality: string, doctorList: Doctor[]}> = [];

ngOnInit() {
  // 假设原始doctors数组已经从接口/其他位置获取完成
  const groupMap = new Map<string, Doctor[]>();
  this.doctors.forEach(doctor => {
    const speciality = doctor.doctorSpeciality;
    if (!groupMap.has(speciality)) {
      groupMap.set(speciality, []);
    }
    groupMap.get(speciality).push(doctor);
  });
  // 把Map转成数组方便模板遍历
  this.groupedDoctors = Array.from(groupMap.entries()).map(([speciality, list]) => ({
    speciality,
    doctorList: list
  }));
}

步骤2：调整HTML模板逻辑 #

<div class="row">
  <div class="col-md-9" *ngFor="let group of groupedDoctors; let i = index">
    <!-- 每个专科仅显示一次标题 -->
    <h3 class="header-subtitle">{{group.speciality}}</h3>
    <!-- 遍历当前专科下的所有医生 -->
    <div *ngFor="let doctor of group.doctorList">
      <div class="doctor">
        <div class="doctor-description">
          <h4 class="name-title">Dr. {{ doctor.doctorName}}</h4>
        </div>
      </div>
      <hr>
    </div>
  </div>
</div>

方案2：模板内直接判断（需提前对数组按专科排序） #

如果不想修改ts逻辑，可以先把原始doctors数组按doctorSpeciality字段排序，然后通过判断当前项和上一项的专科是否一致，决定是否显示标题：

<div class="row">
  <div class="col-md-9" *ngFor="let doctor of doctors; let i = index">
    <!-- 只有第一个元素，或当前专科和上一个元素的专科不同时才渲染标题 -->
    <h3 class="header-subtitle" *ngIf="i === 0 || doctor.doctorSpeciality !== doctors[i-1].doctorSpeciality">
      {{doctor.doctorSpeciality}}
    </h3>
    <div class="doctor">
      <div class="doctor-description">
        <h4 class="name-title">Dr. {{ doctor.doctorName}}</h4>
      </div>
    </div>
    <hr>
  </div>
</div>

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