Angular 19中如何在@for循环每6次迭代时新增一行？

你的问题出在Angular模板编译器要求HTML结构必须完全合法，不能在一个@if块中打开标签，却在另一个@if块中闭合。这种不平衡的标签写法会触发编译器的语法错误。

正确实现方式 #

我们可以先在组件中将userRoles数组按每6个元素一组进行拆分，之后在模板中嵌套循环：外层循环遍历每组（即每行），内层循环遍历组内的每个角色（即每列）。

组件代码

在组件类中添加一个计算属性，用于拆分数组：

get roleRows(): typeof this.userRoles[] {
  const rows = [];
  const chunkSize = 6;
  for (let i = 0; i < this.userRoles.length; i += chunkSize) {
    rows.push(this.userRoles.slice(i, i + chunkSize));
  }
  return rows;
}

模板代码

修改模板，使用嵌套循环生成合法的HTML结构：

<div class='container'>
  @for(row of roleRows; track row[0]?.id){
    <div class="row">
      @for(role of row; track role.id){
        <div class="col-2">
          {{ role.name }}
        </div>
      }
    </div>
  }
</div>

额外说明 #

• 这种方式确保了HTML标签始终正确嵌套，完全符合Angular模板编译器的要求，不会再出现语法错误。
• 相比用role.id做模运算，基于数组索引拆分的方式更可靠，因为role.id不一定是连续的数字，可能导致分组逻辑失效。

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