Angular中如何在表格展示同ID多条数据？现有代码遇重复问题求助

看起来你是想把相同userId的帖子归为一组，只显示一次userId作为分组标题，而不是每行都重复显示对吧？我给你两种方案，分别适合自定义样式和保留Datatable原生功能的场景：

方案一：手动预处理数据并构建分组表格 #

这种方式适合你完全自定义分组头的样式和结构，步骤如下：

1. 在组件中对数据进行分组 #

先把从接口拿到的posts数组按userId分组，转换成便于模板遍历的结构：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-posts-table',
  templateUrl: './posts-table.component.html',
  styleUrls: ['./posts-table.component.css']
})
export class PostsTableComponent implements OnInit, OnDestroy {
  groupedPosts: { userId: number; posts: any[] }[] = [];
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject<any>();

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 20
    };

    this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts').subscribe(posts => {
      // 按userId分组
      const groupMap = new Map<number, any[]>();
      posts.forEach(post => {
        if (!groupMap.has(post.userId)) {
          groupMap.set(post.userId, []);
        }
        groupMap.get(post.userId)!.push(post);
      });

      // 转换成数组格式
      this.groupedPosts = Array.from(groupMap.entries()).map(([userId, posts]) => ({
        userId,
        posts
      }));

      // 触发Datatable渲染
      this.dtTrigger.next(null);
    });
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

2. 修改模板，构建分组行 #

在模板里先渲染userId分组头，再遍历该用户下的所有帖子：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>Sl No</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let group of groupedPosts">
      <!-- 分组头行，合并三列 -->
      <tr class="user-group">
        <td colspan="3">
          <strong>User ID: {{ group.userId }}</strong>
        </td>
      </tr>
      <!-- 遍历当前用户的帖子 -->
      <tr *ngFor="let post of group.posts">
        <td>{{ post.id }}</td> <!-- 用post的id作为序号，也可以自定义累加 -->
        <td>{{ post.title }}</td>
        <td>{{ post.body }}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

3. 添加分组头样式（可选） #

给分组头加个背景色，让它更显眼：

.user-group {
  background-color: #f8f9fa;
  border-top: 2px solid #dee2e6;
}
.user-group td {
  padding: 10px 15px;
}

方案二：使用DataTables的RowGroup扩展 #

如果你想保留Datatable的排序、搜索、分页等原生功能，推荐用官方的RowGroup扩展，步骤如下：

1. 安装并引入RowGroup依赖 #

首先确保你已经安装了相关包：

npm install datatables.net-rowgroup datatables.net-rowgroup-dt

然后在angular.json里添加对应的样式和脚本：

"styles": [
  // ...其他已有的样式
  "node_modules/datatables.net-rowgroup-dt/css/rowGroup.dataTables.css"
],
"scripts": [
  // ...其他已有的脚本
  "node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.js"
]

2. 配置dtOptions启用分组 #

在组件里配置RowGroup，指定按userId分组：

dtOptions: DataTables.Settings = {
  rowGroup: {
    dataSrc: 'userId', // 分组依据的字段
    startRender: (rows, group) => {
      // 自定义分组头内容
      return $('<tr/>')
        .append(`<td colspan="3"><strong>User ID: ${group}</strong></td>`)
        .addClass('user-group');
    }
  },
  columnDefs: [
    // 如果你不想显示userId列，可以隐藏它
    // { targets: [3], visible: false }
  ],
  pagingType: 'full_numbers'
};

3. 简化模板 #

这时候模板不需要手动分组，直接遍历所有posts即可，Datatable会自动帮你分组：

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>Sl No</th>
      <th>Title</th>
      <th>Body</th>
      <!-- 如果需要显示userId列可以加上，否则隐藏 -->
      <!-- <th>User ID</th> -->
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let post of posts; let idx = index">
      <td>{{ idx + 1 }}</td>
      <td>{{ post.title }}</td>
      <td>{{ post.body }}</td>
      <!-- <td>{{ post.userId }}</td> -->
    </tr>
  </tbody>
</table>

两种方案都能解决userId重复显示的问题，你可以根据自己的需求选择：如果需要高度自定义分组样式，选方案一；如果想保留Datatable的所有原生功能，选方案二。

内容的提问来源于stack exchange，提问作者Sreejesh T S