如何使用ngFor根据角度的某些规范对项目进行分类

Question

我正在尝试列出具有某些专业知识的医生。但是下面的代码创建了几个具有相同专业化项目的标题。

下面是我的html代码：

<div class="row">
        <div class="col-md-9" *ngFor="let doctor of doctors; let i = index">
            <h3 class="header-subtitle">{{doctor.doctorSpeciality}}</h3>
            <div class="doctor">
                <div class="doctor-description">
                    <h4 class="name-title">Dr. {{ doctor.doctorName}}</h4>
                </div>
            </div>
            <hr>
        </div>
</div>

我得到的输出是这样的：

普通医师

医生姓名1

心脏病专家

医生姓名2

普通医师

医生姓名3

这里，全科医生类别的医生姓名3应该在第一个标题标题的标题下。

Answer 1

这不是你只能在 html 中实现的（至少没有一些指令/管道）。

我不确切知道您的 .ts 代码是什么样的，但是您正在寻找的分组需要在您在 *ngFor 中使用的实际集合上进行。 doctors 很可能是一个平面对象数组，如下所示，您可以在其上使用 reduce 和 map 来计算组。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  readonly doctors = [
    {
      doctorSpeciality: 'General Physician',
      doctorName: 'doctor name 1'
    },
    {
      doctorSpeciality: 'Cardiologist',
      doctorName: 'doctor name 2'
    },
    {
      doctorSpeciality: 'General Physician',
      doctorName: 'doctor name 3'
    }
  ];

  specialityGroupedDoctors = {};

  constructor() {
    this.computeGroups();
  }

  private computeGroups(): any {
    this.specialityGroupedDoctors = this.doctors.reduce(
      (acc: any, doc: any) => {
        if (!acc[doc.doctorSpeciality]) {
          acc[doc.doctorSpeciality] = [];
        }
        acc[doc.doctorSpeciality].push(doc);
        return acc;
      }, {});
  }
}

然后html模板需要改成这样：

<div class="row">
  <div class="col-md-9" *ngFor="let group of specialityGroupedDoctors | keyvalue">
    <h3 class="header-subtitle">{{group.key}}</h3>
    <div class="doctor" *ngFor="let doctor of group.value">
      <div class="doctor-description">
        <h4 class="name-title">Dr. {{ doctor.doctorName}}</h4>
      </div>
    </div>
    <hr>
  </div>
</div>

---

这里有一个 StackBlitz 沙箱，您可以在其中看到它的工作原理：https://stackblitz.com/edit/angular-ivy-t86wnc?file=src/app/app.component.html