从Twig迁移至Angular5：循环中保存变量实现月份表头的问题

我来帮你把这段Twig的循环表头逻辑转换成Angular 5的实现，核心就是利用已排序的数据集，在月份变化时渲染灰色表头行，下面给你两种实用的方案：

方案一：组件内预先分组（逻辑清晰，推荐） #

先在组件里把数据按月份分组，这样模板里的循环会更简洁，也方便后续复用分组数据：

// 你的组件.ts文件
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 假设这是你从接口拿到的已排序结果集
  results: any[] = [];
  // 分组后的数据结构：[{ month: "1月", items: [数据项1, 数据项2...] }, ...]
  groupedResults: { month: string, items: any[] }[] = [];

  ngOnInit(): void {
    this.groupDataByMonth();
  }

  private groupDataByMonth(): void {
    if (!this.results.length) return;

    let currentMonth = this.results[0].month;
    let currentItems = [this.results[0]];

    for (let i = 1; i < this.results.length; i++) {
      const item = this.results[i];
      if (item.month === currentMonth) {
        currentItems.push(item);
      } else {
        // 把当前组加入分组数组
        this.groupedResults.push({ month: currentMonth, items: currentItems });
        // 重置当前组
        currentMonth = item.month;
        currentItems = [item];
      }
    }
    // 别忘了加入最后一组数据
    this.groupedResults.push({ month: currentMonth, items: currentItems });
  }
}

然后在模板里嵌套循环渲染：

<!-- 你的组件.html文件 -->
<table>
  <ng-container *ngFor="let group of groupedResults">
    <!-- 月份表头行 -->
    <tr class="month-header">
      <!-- 这里的colspan要和你的表格列数一致 -->
      <td colspan="3">{{ group.month }}</td>
      <!-- 可以根据原Twig的内容补充其他表头单元格 -->
    </tr>
    <!-- 该月份的所有数据行 -->
    <tr *ngFor="let item of group.items">
      <td>{{ item.someField1 }}</td>
      <td>{{ item.someField2 }}</td>
      <td>{{ item.someField3 }}</td>
    </tr>
  </ng-container>
</table>

再给表头加个CSS类（代替内联样式，更规范）：

/* your-component.component.css */
.month-header {
  background-color: #c0c0c0;
}

方案二：模板内直接判断（无需修改组件逻辑） #

如果不想在组件里处理分组，直接利用已排序的特性，在模板里通过索引判断当前月份和上一个是否不同：

<!-- 你的组件.html文件 -->
<table>
  <ng-container *ngFor="let result of results; let i = index">
    <!-- 第一个元素直接渲染表头，或者当前月份和上一个不同时渲染 -->
    <tr *ngIf="i === 0 || result.month !== results[i-1].month" class="month-header">
      <td colspan="3">{{ result.month }}</td>
      <!-- 原Twig的表头内容 -->
    </tr>
    <!-- 渲染当前数据行 -->
    <tr>
      <td>{{ result.someField1 }}</td>
      <td>{{ result.someField2 }}</td>
      <td>{{ result.someField3 }}</td>
    </tr>
  </ng-container>
</table>

同样加上那个CSS类即可，这种方式代码更简洁，适合简单场景。

两种方案都能完美实现你原Twig的逻辑，你可以根据自己的项目情况选择~

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