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

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应该在第一个header职称的标题下。

Answer 1

这不是只有 html 才能实现的（至少没有一些 directives/pipes）。

我不知道你的 .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

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

How to categories items according to some specification in angular using ngFor

ngfor

angular10

全科医生

心脏病专家

全科医生