Angular：基于9条记录的数据集创建3行多列表格

针对你要将9条记录（每条含name和value）从每行1条改为3行显示的需求，提供两种可行方案，同时先修正你原有代码中的两处错误：

• *ngFor语法错误：冒号:应改为分号;
• 多余的闭合标签：<td>{{record.name}}</td>后多写了一个</td>

方案一：组件内预处理分组数据 #

先在组件逻辑中将原始数据按每组3条进行分组，再在模板中循环渲染行和组内记录，逻辑清晰且模板简洁。

组件TS代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  dataRecords: {name: string, value: number}[] = []; // 从服务获取的原始数据
  groupedRecords: {name: string, value: number}[][] = [];

  ngOnInit(): void {
    // 假设已从服务获取到dataRecords数据
    const groupSize = 3;
    // 按每组3条分组
    for (let i = 0; i < this.dataRecords.length; i += groupSize) {
      this.groupedRecords.push(this.dataRecords.slice(i, i + groupSize));
    }
  }
}

模板HTML代码 #

<table>
  <tbody>
    <!-- 循环每组数据生成一行 -->
    <tr *ngFor="let group of groupedRecords">
      <!-- 循环组内每条记录，渲染name和value两列 -->
      <ng-container *ngFor="let record of group">
        <td>{{ record.name }}</td>
        <td>{{ record.value }}</td>
      </ng-container>
    </tr>
  </tbody>
</table>

方案二：模板内直接通过索引判断 #

无需修改组件逻辑，直接在模板中利用*ngFor的索引值控制行渲染，适合快速实现需求。

模板HTML代码 #

<table>
  <tbody>
    <!-- 每3条记录生成一行，仅当索引为3的倍数时创建行 -->
    <tr *ngFor="let _ of dataRecords; let rowIndex = index;" [ngIf]="rowIndex % 3 === 0">
      <!-- 循环当前行的3条记录 -->
      <ng-container *ngFor="let colOffset of [0, 1, 2]">
        <!-- 确保不越界（即使数据条数不是3的倍数也能兼容） -->
        <ng-container *ngIf="dataRecords[rowIndex + colOffset]">
          <td>{{ dataRecords[rowIndex + colOffset].name }}</td>
          <td>{{ dataRecords[rowIndex + colOffset].value }}</td>
        </ng-container>
      </ng-container>
    </tr>
  </tbody>
</table>

两种方案对比：

• 方案一：数据预处理后逻辑更直观，模板代码更简洁，适合数据结构固定或更新频率低的场景
• 方案二：无需组件层改动，直接在模板完成布局，适合快速迭代或临时需求场景

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