如何在Angular 7中添加此类列表？适配TEST workflow数据的分组条目需求

嘿，我来帮你搞定Angular 7里的分组列表！要适配不同TEST workflow的数据，咱们可以分几步来实现，思路很清晰：先统一数据结构，再做分组处理，最后在模板里渲染出分组后的列表。

不管你从哪个TEST workflow获取数据，首先要把它们统一成便于分组的格式。咱们先定义一个通用的条目接口，包含分组依据字段（比如workflowName，用来区分不同的TEST workflow）和你需要展示的内容字段：

// 在组件文件中定义条目接口
interface TestItem {
  id: number;
  name: string;
  status: string;
  workflowName: string; // 核心分组字段，对应不同TEST workflow的标识
}

// 示例数据（模拟来自不同TEST workflow的返回结果）
testData: TestItem[] = [
  { id: 1, name: '测试用例A', status: '通过', workflowName: '回归测试' },
  { id: 2, name: '测试用例B', status: '失败', workflowName: '冒烟测试' },
  { id: 3, name: '测试用例C', status: '通过', workflowName: '回归测试' },
  { id: 4, name: '测试用例D', status: '跳过', workflowName: '冒烟测试' },
];

如果不同TEST workflow返回的字段名不一样（比如有的叫testCaseName而非name），你可以在获取数据后做一层映射，把它们转成统一的TestItem结构，这样后续分组逻辑就不用改了。

这里有两种常用方式，你可以根据场景选：

方式一：组件内直接处理（适合简单场景） #

在组件的ngOnInit钩子中，把原始数组转成分组后的对象——键是分组名（比如不同的TEST workflow名称），值是对应分组下的条目数组：

groupedTestData: { [key: string]: TestItem[] } = {};

ngOnInit(): void {
  // 遍历原始数据，按workflowName分组
  this.testData.forEach(item => {
    const workflowKey = item.workflowName;
    // 如果当前分组不存在，先初始化空数组
    if (!this.groupedTestData[workflowKey]) {
      this.groupedTestData[workflowKey] = [];
    }
    this.groupedTestData[workflowKey].push(item);
  });
}

方式二：自定义分组管道（适合复用场景） #

如果你的项目中多个组件都需要分组功能，写一个自定义管道会更高效。先创建group-by.pipe.ts文件：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'groupBy' })
export class GroupByPipe implements PipeTransform {
  transform(collection: any[], groupField: string): { key: string; value: any[] }[] {
    if (!collection || !groupField) return [];
    
    // 用reduce方法分组，最后转成便于模板遍历的数组格式
    const groupedObj = collection.reduce((groups, item) => {
      const key = item[groupField];
      if (!groups[key]) {
        groups[key] = [];
      }
      groups[key].push(item);
      return groups;
    }, {} as { [key: string]: any[] });

    // 把对象转成[{key: '分组名', value: [条目数组]}]的格式
    return Object.keys(groupedObj).map(key => ({
      key,
      value: groupedObj[key]
    }));
  }
}

然后在你的模块（比如AppModule）中声明这个管道：

import { GroupByPipe } from './group-by.pipe';

@NgModule({
  declarations: [
    // ...你的其他组件、指令
    GroupByPipe
  ],
  // ...其他配置
})
export class AppModule { }

现在就可以把分组后的数据渲染成你想要的列表样式了：

用组件内处理的分组数据渲染 #

<div class="grouped-test-list">
  <!-- 遍历每个分组 -->
  <div *ngFor="let workflowName of Object.keys(groupedTestData)" class="workflow-group">
    <!-- 分组标题 -->
    <h3 class="group-title">{{ workflowName }}</h3>
    <!-- 遍历分组下的条目 -->
    <ul class="test-item-list">
      <li *ngFor="let item of groupedTestData[workflowName]" class="test-item">
        <span class="item-name">{{ item.name }}</span>
        <!-- 可以根据状态加样式 -->
        <span class="item-status" [ngClass]="item.status.toLowerCase()">
          {{ item.status }}
        </span>
      </li>
    </ul>
  </div>
</div>

用自定义管道渲染 #

<div class="grouped-test-list">
  <!-- 直接用管道处理原始数据 -->
  <div *ngFor="let group of testData | groupBy: 'workflowName'" class="workflow-group">
    <h3 class="group-title">{{ group.key }}</h3>
    <ul class="test-item-list">
      <li *ngFor="let item of group.value" class="test-item">
        <span class="item-name">{{ item.name }}</span>
        <span class="item-status" [ngClass]="item.status.toLowerCase()">
          {{ item.status }}
        </span>
      </li>
    </ul>
  </div>
</div>

• 动态分组：如果有时候需要切换分组依据（比如按status分组而非workflowName），可以把分组字段做成组件变量，比如currentGroupField = 'workflowName'，然后在模板或逻辑中替换这个变量即可。
• 样式优化：可以给分组标题加折叠/展开功能（用*ngIf和点击事件控制条目显示），或者给不同TEST workflow的分组加不同的背景色，提升可读性。
• 异步数据处理：如果数据是从接口异步获取的，记得把分组逻辑放在subscribe回调里，或者用async管道配合管道使用。

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