Angular 如何根据*ngFor循环内已遍历值调整渲染实现表格分组斑马纹

有两个比你现有思路更简洁的实现方案，不需要复杂逻辑，也不用改动原始数据结构：

方案1：计算属性预标记样式（推荐，适配所有Angular版本） #

只需要在组件内新增一个计算属性，遍历原数组的同时给每个条目标记对应样式类，完全不需要修改原始数据，模板逻辑干净：

• 组件代码：

// 计算属性，返回带样式标记的数组
get styledList() {
  let groupRowIndex = -1;
  return this.originFlatList.map(item => {
    // 遇到表头重置组内行计数
    if (isHeaderItem(item)) {
      groupRowIndex = -1;
      return { data: item, rowClass: 'group-header' }
    }
    groupRowIndex++;
    return {
      data: item,
      rowClass: groupRowIndex % 2 === 0 ? 'row-odd' : 'row-even'
    }
  })
}

// 替换为你自己的表头判断逻辑
function isHeaderItem(item) {
  return item.type === 'header';
}

• 模板代码：

<tr *ngFor="let row of styledList" [ngClass]="row.rowClass">
  <!-- 正常渲染row.data的字段即可 -->
</tr>

• 配套CSS：

.group-header {
  /* 表头自定义样式 */
  background: #2d3748;
  color: #fff;
}
.row-odd {
  background: #f7fafc;
}
.row-even {
  background: #edf2f7;
}

这个方案性能足够应对绝大多数场景，只有当原始数组变化时才会重新计算标记。

方案2：多tbody分组渲染（样式逻辑最简单） #

你之前顾虑的“输出未闭合标签”问题其实不存在，只需要先把单层数组按组拆分，外层循环输出tbody即可，组内直接用Angular内置的奇偶变量：

• 组件代码：

get groupedList() {
  const groups = [];
  let currentGroup;
  this.originFlatList.forEach(item => {
    if (isHeaderItem(item)) {
      currentGroup = [item];
      groups.push(currentGroup);
      return;
    }
    currentGroup.push(item);
  })
  return groups;
}

• 模板代码：

<tbody *ngFor="let group of groupedList">
  <!-- 表头行 -->
  <tr class="group-header">
    <!-- 渲染group[0]的表头字段 -->
  </tr>
  <!-- 组内数据行，直接用内置的odd变量 -->
  <tr 
    *ngFor="let dataItem of group.slice(1); let odd = odd"
    [ngClass]="odd ? 'row-odd' : 'row-even'"
  >
    <!-- 渲染数据字段 -->
  </tr>
</tbody>

这个方案完全不需要自己维护计数逻辑，利用浏览器原生的tbody隔离特性，后续调整样式也更方便。

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