css - 隐藏行后 Angular 重新应用表 strip 化

Question

我有一个需要 strip 化的表，但它有一些行可能会在以后隐藏。隐藏某些行后，不会发生重新 strip 化，因此 strip 化已关闭。我怎样才能强制表自己重新 strip 化？这是我认为应该可以工作的 CSS，但事实并非如此。然后还有我的 html。

.isHidden {
    display:none;
}

tbody {
    tr:not(.isHidden):nth-child(odd) {
        background: rgb(238, 238, 238);
    }
}

<tbody>
        <tr [ngClass]="{'isHidden': !line.get('isVisible').value}" *ngFor="let line of lineDetailsArray.controls; let i=index;">
...
</tr>
</tbody>

Answer 1

不幸的是，目前您无法仅使用 CSS 解决问题。没错，还有一个可能有用的附加项 in the spec - :nth-child(An+B of S) . The following example完全符合您的情况:

Normally, to zebra-stripe a table’s rows, an author would use CSS similar to the following:

tr {
  background: white;
}
tr:nth-child(even) {
  background: silver;
}

However, if some of the rows are hidden and not displayed, this can break up the pattern, causing multiple adjacent rows to have the same background color. Assuming that rows are hidden with the [hidden] attribute in HTML, the following CSS would zebra-stripe the table rows robustly, maintaining a proper alternating background regardless of which rows are hidden:

tr {
  background: white;
}
tr:nth-child(even of :not([hidden])) {
  background: silver;
}

注意事项？浏览器对此选项的支持甚至不受限制:它是 non-existent .

---

但是，仍然有办法摆脱这种痛苦。尽管 Angular 不会让你放置 ngIf和 ngFor在单个元素上(我想这太简单了)，有一个解决方法 - 使用 <ng-container>作为占位符:

<ng-container *ngFor="let item of list">
  <ng-container *ngIf="!item.hidden">
    <tr>
      <td>{{item.name}}</td>
      <td><input type="checkbox" 
                [checked]="item.hidden" 
                (change)="item.hidden = !item.hidden" /></td>
    </tr>
  </ng-container>
</ng-container>

Demo (感谢 @imkremen 帮助创建了这个)。