Angular 18网格数据转置显示问题：保留原数据格式

• 核心思路：不修改原始board数组（保证后续操作和控制台输出不受影响），通过计算属性生成转置后的视图数据供页面渲染。

步骤1：添加转置计算属性 #

在组件类中新增一个getter方法，基于原board生成转置数组：

get transposedBoard(): any[][] {
  if (!this.board?.length) return [];
  // 转置逻辑：以原数组的列数为新数组的行数，逐列取值生成新行
  return this.board[0].map((_, colIdx) => 
    this.board.map(row => row[colIdx])
  );
}

步骤2：修改模板渲染逻辑 #

把页面中原本循环board的地方，换成循环transposedBoard：

<div class="grid-container">
  <div *ngFor="let row of transposedBoard" class="grid-row">
    <div *ngFor="let cell of row" class="grid-cell">
      {{ cell }}
    </div>
  </div>
</div>

关键验证 #

完成后：

• 页面会以转置后的格式展示网格数据
• console.log(JSON.stringify(this.board[0]))依然输出原始未转置的数组结构，完全不影响后续对board的修改操作

原页面不展示的排查提示 #

之前页面无法正常显示，大概率是原模板的循环逻辑和board的行/列结构不匹配。使用转置计算属性后，模板按行循环的逻辑可以适配转置后的结构，解决展示问题。

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