Angular - 根据循环中看到的值调整 ngFor 循环行为答案

【问题标题】：Angular - adjust ngFor loop behavior based on values seen in loopAngular - 根据循环中看到的值调整 ngFor 循环行为
【发布时间】：2021-10-18 18:36:36
【问题描述】：

用例是要在表格中显示的一系列值。数据的结构类似于事件流，即单个平面对象数组，包含多个出现的单个标头对象序列，后跟 1+ 个数据对象。我想对行进行条纹，标题为一种颜色，并为组中的以下行交替颜色。条带化应该在每个标头之后重新开始。

我考虑过：

为循环创建一个局部变量，我可以在其中标记我更改的奇数或偶数概念。 AFAIK，我做不到。
使用多个 tbody 部分，但这需要编写未封闭的标签，即在循环中编写一个封闭的 tbody，然后为下一组编写一个新的开放 tbody，我认为这是不支持的
预处理数据以构建可通过循环索引引用的伴随数组
预处理数组以将其分解为数组数组并使用嵌套的 *ngFor 块。

有没有我没有考虑过的更简单的解决方案？

【问题讨论】：

那么，可视化的唯一区别是你的行会有不同的颜色？
是的。假设标题 bg 为蓝色，奇数为白色，偶数为灰色。序列头数据数据头数据数据数据应导致蓝白灰蓝白灰白

标签： angular

【解决方案1】：

我建议您采用与建议的数字 4 类似的方法。我会使用 Angular 管道对您的对象进行分组，从而使“行”的呈现更容易。

分组对象可能看起来像这样：

interface GroupObjects{
  header: Header,
  entries: Entry[]
}

管道如下所示：

@Pipe({ name: 'group' })
export class GroupPipe implements PipeTransform {
  transform(arr: Header | Entry): GroupObjects[] {
    const result = [];
    let group: GroupObjects = null;
    arr.forEach(entry => {
      // Check for instance or use another comparison
      if (entry instanceof Header) {
        group = { header: entry, entries: [] };
        result.push(group);
      } else {
        group.entries.push(entry);
      }
    });
    return result;
  }
}

最后你的 HTML 你可以遍历它并显示你的结构

<table>
  <tbody>
    <ng-container *ngFor="let obj of yourArray | group">
      <tr class="blueBg">Your stuff for header here</tr>
      <ng-container *ngFor="let entry of obj.entries; even as isEven">
        <tr [ngClass]="{'whiteBg': !isEven, 'grayBg': isEven}">Your stuff for the entries here</tr>
      </ng-container>
    </ng-container>
  </tbody>
</table>

我希望，我没有在代码中犯错误，这对你有帮助:)

【讨论】：