Angular中如何按acrId分组compName并生成嵌套列表？

步骤1：修改TypeScript代码，构建包含分组车型名称的格式化数据 #

首先，我们需要将assessmentDetails中的compName按acrId分组，再将分组结果关联到对应的changeRequest条目上：

processData(data: any) {
  // 1. 按acrId分组车型名称
  const compGroup = new Map<number, string[]>();
  data.assessmentDetails.forEach(detail => {
    // 仅处理包含crList的条目
    if (detail.crList) {
      detail.crList.forEach(cr => {
        if (!compGroup.has(cr.acrId)) {
          compGroup.set(cr.acrId, []);
        }
        compGroup.get(cr.acrId)!.push(cr.compName);
      });
    }
  });

  // 2. 格式化changeRequest，添加对应车型列表
  this.formatedBfaData = data.changeRequest.map(crObj => {
    return {
      crId: crObj.ccrId !== '' ? crObj.ccrId : null,
      name: crObj.message,
      compNames: compGroup.get(crObj.acrId) || []
    };
  });
}

步骤2：更新HTML模板，渲染嵌套列表 #

修改现有模板，在每个有序列表项中添加嵌套的无序列表，循环渲染分组后的车型名称：

<ol>
  <li *ngFor="let crObj of formatedBfaData">
    <!-- 原有模板渲染逻辑 -->
    <ng-container 
      *ngTemplateOutlet="crObj.crId ? displayCrLink : displayCrErrorMessage; context:{ $implicit: crObj}">
    </ng-container>

    <!-- 新增：渲染分组后的车型列表 -->
    <ul *ngIf="crObj.compNames.length > 0">
      <li *ngFor="let compName of crObj.compNames">{{ compName }}</li>
    </ul>

    <ng-template #displayCrLink let-crObj>
      <div class="pb-2">{{ crObj.crId }}</div>
    </ng-template>

    <ng-template #displayCrErrorMessage let-crObj>
      <div class="text-danger">{{ crObj.name }}</div>
    </ng-template>
  </li>
</ol>

核心逻辑说明 #

• 使用Map结构存储acrId与车型名称数组的映射，保证分组逻辑高效清晰
• 格式化changeRequest时，通过acrId关联对应的车型列表，确保每个条目匹配正确的车型数据
• HTML中通过*ngIf判断是否存在车型数据，避免空列表渲染；使用*ngFor循环渲染每个车型名称

内容的提问来源于stack exchange，提问作者Mitul Panchal