angular 8 在使用 ngFor 的行上获取替代颜色

Question

我运行遇到了获取具有 2 种不同颜色的交替行的问题。我有一个来自后端的 JSON 数据，它是一个动态对象数组。我需要在 table 中显示数据，如此处的示例所示： https://stackblitz.com/edit/create-xpkbjm?file=app/app.component.html

我在大多数 Whosebug 问题中发现的奇数、偶数规则在这里似乎不起作用。

我想用不同的颜色显示行（行以组的形式出现）。数据的呈现方式应类似于上述 stackblitz 中的 link，但每一行都应有不同的颜色。奇数、偶数规则仅适用于每个组，但不会交替 table 中的整体颜色。

Answer 1

您可以使用纯 CSS 执行此操作，而无需修改 angular。

tbody tr
{
  background-color: #FFFFFF;
  color: #fff;
}

tbody tr:nth-child(odd)
{
  background-color: #000000;
  color: #fff;
}

Answer 2

你可以用普通的旧 css,

tr:nth-child(2n) {
  background: lightgray;
}

您可以更新用于循环的对象并创建 table。

目前，您正在使用两个循环，

以 tbody 胜 groups
和 tr 一胜 group.events

相反，您可以创建另一个变量，它是事件列表，

// app.component.ts
events = this.groups.map(g => g.events).flat();

这将您的 HTML 简化为

<!-- app.component.html -->
<tr *ngFor="let event of events; index as i">
  <td>
    {{event.event}}
  </td>
</tr>

检查 stackblitz

更新:

您可以在整个对象的每个事件上使用 group/count 属性跟踪总元素，

//app.component.ts
constructor() {
  this.createGroups();
}

createGroups() {
  let count = 0;
  this.groups.forEach(g => {
    g.events.forEach(e => {
      e.group = count++;
    });
  });

  console.log(this.groups);
}

然后在这个属性,

的基础上用[ngClass]绑定一个cssclass

<tbody>
  <tr *ngFor="let group of groups; index as i">
    <table>
      <tbody>
        <tr *ngIf="i!==0">
          <td></td>
        </tr>
        <tr *ngFor="let event of group.events;" [ngClass]="{'even': event.group % 2 !== 0}">
          <td>{{event.event}} {{event.group}}</td>
        </tr>
      </tbody>
    </table>
  </tr>
</tbody>

已更新stackblitz

angular 8 在使用 ngFor 的行上获取替代颜色

angular 8 getting alternate color on rows that uses ngFor

css

angular

html-table

ngfor