Angular 2+ 如何遍历数组的数组并在表格中展示？

兄弟，我太懂你碰到这个错误的崩溃感了！先给你把问题根源掰扯清楚：你在模板的*ngFor里调用了increment()这个会修改组件内部counter变量的函数，而Angular的变更检测机制会在每次检查时重新执行这个函数，导致counter不断变化——Angular一看，哎？我刚检查完的数据怎么又变了？直接就抛出这个报错了。

正确的实现方式 #

既然你的需求是把messageSplit这个二维数组的子数组元素放到<td>里，完全不需要手动维护counter或者调用那种会改状态的函数，直接用嵌套的*ngFor就能搞定：

1. 模板代码（直接渲染预处理好的messageSplit）

<table>
  <!-- 遍历外层的每个子数组 -->
  <tr *ngFor="let rowItems of messageSplit">
    <!-- 遍历子数组里的每个元素，放到<td>中 -->
    <td *ngFor="let item of rowItems">{{item}}</td>
  </tr>
</table>

2. 组件内预处理messageSplit（如果还没处理的话）

如果messageSplit是从原始的messages数组拆分出来的，别在模板里动态拆分，直接在组件的初始化逻辑里处理好：

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  messages: any[] = []; // 你的原始数据数组
  messageSplit: any[][] = [];
  chunkSize = 2; // 假设你要每2个元素拆成一行，可根据需求调整

  ngOnInit(): void {
    // 拆分原始数组为二维数组，用于表格行渲染
    for (let i = 0; i < this.messages.length; i += this.chunkSize) {
      this.messageSplit.push(this.messages.slice(i, i + this.chunkSize));
    }
  }
}

关键提醒 #

永远别在Angular模板的表达式里调用会修改组件状态的函数（比如修改变量、操作数组的函数）！变更检测会多次执行这些表达式，不仅会触发报错，还可能导致页面渲染出各种奇怪的问题。

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