Angular NgFor网格布局：如何在每行末尾添加跨行分隔线？

我有一个[key:string]类型的数组，当前渲染效果如下：

item1 item2 item3
item4 item5 item6
item7 item8 item9

现在需要添加分隔线，实现如下渲染效果：

item1 item2 item3
----------------
item4 item5 item6
----------------
item7 item8 item9

负责布局的代码片段如下：

<div class="row">
    <div class="col-8 mb-5" *ngFor="let detail of details | keyvalue:originalOrder;">
      <b>{{detail.key }}:</b>{{ detail.value }}
    </div>
</div>

直接添加分隔线会得到错误效果：

item1  item2  item3
-----  -----  ----
item4  item5  item6
-----  -----  ----
item7  item8  item9

请问如何修改代码，在每行结束时渲染一条跨行的分隔线？

方法1：利用ngFor索引判断行尾，添加跨行分隔线 #

从示例看每行包含3个元素，可通过索引判断当前元素是否为行尾，再添加占满整行的分隔线：

<div class="row">
    <div class="col-8 mb-5" *ngFor="let detail of details | keyvalue:originalOrder; let i = index;">
      <b>{{detail.key }}:</b>{{ detail.value }}
      <!-- 每行第3个元素（非最后一行）后添加分隔线 -->
      <div class="w-100 border-bottom border-dark my-2" *ngIf="(i + 1) % 3 === 0 && (i + 1) !== details.length"></div>
    </div>
</div>

• 细节说明：
  • let i = index 获取当前元素的循环索引
  • (i + 1) % 3 === 0 判定是否为每行最后一个元素
  • (i + 1) !== details.length 避免在数组最后一行末尾添加多余分隔线
  • w-100 确保分隔线占满整行宽度，border-bottom 实现线条样式，my-2 控制上下间距

方法2：先分组再渲染（结构更清晰） #

如果每行元素数量可能变化，或不想硬编码数值，可先将数组按行分组后再渲染：

1. 在组件类中添加分组逻辑：

get groupedDetails() {
  const groupSize = 3; // 每行元素数量
  const groups = [];
  for (let i = 0; i < this.details.length; i += groupSize) {
    groups.push(this.details.slice(i, i + groupSize));
  }
  return groups;
}

2. 修改模板代码：

<div class="row" *ngFor="let group of groupedDetails; let last = last;">
    <div class="col-8 mb-5" *ngFor="let detail of group | keyvalue:originalOrder;">
      <b>{{detail.key }}:</b>{{ detail.value }}
    </div>
    <!-- 最后一组不添加分隔线 -->
    <div class="w-100 border-bottom border-dark my-2" *ngIf="!last"></div>
</div>

• 细节说明：
  • 先将原数组拆分为多个子数组，每个子数组对应一行元素
  • 按组渲染每行内容，组末尾添加分隔线（排除最后一组）
  • 这种方式结构更直观，无需在单个元素中做判断，后续维护更方便

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