Angular中如何用*ngFor/*ngIf实现动态列数表格？

当然可以用*ngFor和*ngIf实现动态表格，完全不需要拼接HTML字符串——这种手动拼接的方式会跳过Angular的编译流程，导致routerLink失效、组件内样式无法应用，而用模板指令能保留所有Angular的特性。

下面是两种实现方案：

方案1：预处理数据为行分组（推荐） #

先在组件里把对象列表按指定列数分成二维数组（每行包含对应数量的元素），再在模板中嵌套*ngFor渲染：

组件代码 #

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

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  capacity = 60; // 总条目数
  noOfCol = 4; // 列数
  items: {name: string, id: number}[] = [];
  rows: {name: string, id: number}[][] = [];

  ngOnInit(): void {
    // 模拟生成对象列表（替换成你的实际数据）
    this.items = Array.from({length: this.capacity}, (_, idx) => ({
      name: `条目 ${idx + 1}`,
      id: idx + 1
    }));

    // 按列数分组生成行数据
    for (let i = 0; i < this.items.length; i += this.noOfCol) {
      this.rows.push(this.items.slice(i, i + this.noOfCol));
    }
  }
}

模板代码 #

<table class="table" id="myTable">
  <tbody>
    <!-- 遍历每一行 -->
    <tr *ngFor="let row of rows">
      <!-- 遍历当前行的每一列 -->
      <td *ngFor="let item of row" class="table-cell">
        <!-- 正常使用routerLink、数据绑定和样式 -->
        <a [routerLink]="['/detail', item.id]">{{ item.name }}</a>
      </td>
    </tr>
  </tbody>
</table>

方案2：模板内直接通过索引判断（无需预处理数据） #

如果不想修改数据结构，可以直接在模板中利用条目索引判断换行时机：

模板代码 #

<table class="table" id="myTable">
  <tbody>
    <!-- 遍历所有条目，仅在每一行的第一个元素处生成<tr> -->
    <tr *ngFor="let item of items; let idx = index" *ngIf="idx % noOfCol === 0">
      <!-- 截取当前行的所有列元素 -->
      <td *ngFor="let colItem of items.slice(idx, idx + noOfCol)" class="table-cell">
        <a [routerLink]="['/detail', colItem.id]">{{ colItem.name }}</a>
      </td>
    </tr>
  </tbody>
</table>

为什么原方案失效？ #

直接通过innerHTML插入的HTML字符串不会经过Angular的编译流程：

• routerLink这类指令无法被解析，自然无法跳转
• 组件内的样式（默认开启样式隔离）不会应用到动态插入的元素上

而使用Angular的结构型指令（*ngFor/*ngIf）时，Angular会正常编译所有元素，确保数据绑定、指令、样式都能正常工作。

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