如何在动态数据下将Angular HTML表格改为指定行式展示格式？

当前你的Angular HTML代码会为每个rating生成单独一行，要实现一行展示多个条目的布局，可采用以下两种方案：

方案1：使用Flex布局（推荐，更灵活） #

直接替换原有table结构为flex容器，天然支持横向排列与自动换行：

<div id="pdfTable" #pdfTable style="display: none;">
    <div style="font-size:14px;margin-bottom: 15px;">
        <!-- 保留标题行 -->
        <div style="margin-bottom: 8px;">
            <b>Rating Scale: </b>
        </div>
        <!-- Flex容器实现一行多条目 -->
        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            <div *ngFor='let rating of ratings'>
                <b>{{rating.ratingId}}.</b> <b>{{rating.ratingName}}</b>
            </div>
        </div>
    </div>
</div>

关键说明： #

• display: flex：让子元素横向排列
• flex-wrap: wrap：当容器空间不足时，自动换行显示剩余条目
• gap: 20px：控制每个rating条目之间的间距，可根据需求调整数值
• 移除了table结构，避免表格布局对动态排列的限制

方案2：保留Table结构（需自定义分组管道） #

如果必须沿用table结构，可通过Angular管道将ratings数组分组，每n个条目组成一行：

步骤1：自定义Chunk分组管道 #

在Angular项目中创建管道文件（如chunk.pipe.ts）：

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

@Pipe({ name: 'chunk' })
export class ChunkPipe implements PipeTransform {
  transform(arr: any[], groupSize: number): any[][] {
    return Array.from(
      { length: Math.ceil(arr.length / groupSize) },
      (_, index) => arr.slice(index * groupSize, index * groupSize + groupSize)
    );
  }
}

记得在对应的NgModule中声明该管道。

步骤2：修改HTML代码 #

<div id="pdfTable" #pdfTable style="display: none;">
    <table class="table table-borderless mb-0" style="font-size:14px;margin-bottom: 15px;">
        <thead>
            <tr>
                <td style="border:0" colspan="5"><b>Rating Scale: </b></td>
            </tr>
            <!-- 每5个rating组成一行，可调整groupSize数值 -->
            <tr *ngFor='let ratingGroup of ratings | chunk:5'>
                <td style="border:0" *ngFor='let rating of ratingGroup'>
                    <b>{{rating.ratingId}}.</b> <b>{{rating.ratingName}}</b>
                </td>
            </tr>
        </thead>
    </table>
</div>

关键说明： #

• chunk:5：表示每行显示5个rating条目，可根据需求修改数字
• 外层循环分组后的数组生成表格行，内层循环每个分组的rating生成单元格
• 保留了原有的table样式和结构，适合必须使用表格的场景

内容的提问来源于stack exchange，提问作者rose pauline