如何将css设置为角度4中的交替行答案

【问题标题】：How set css to alternating rows in angular 4如何将css设置为角度4中的交替行
【发布时间】：2019-04-17 12:46:45
【问题描述】：

我想定义一个类以 4 角交替行，如何做到这一点？

HTML

 <div class="scrollbars">
            <div  *ngFor="let path of Xyzpaths">
                    <div>{{path.xyz}}</div>
                    <div>{{path.salesItem}}</div>
                    <div>{{path.path1}}</div>
                    <div>{{path.path2}}</div>
            </div>
   </div>

CSS

.odd  {   background-color: #f2f9ff;} 
.even {   background-color: #eceff3; }

【问题讨论】：

Using CSS :even and :odd pseudo-classes with list items的可能重复

标签： css angular rows alternating

【解决方案1】：

是的，您可以在 ngFor 中使用奇数和偶数局部变量，如下所示：

<div class="scrollbars">
    <div *ngFor="let path of Xyzpaths index as i; let even = even; let odd = odd" 
     [ngClass]="{ myOddClass: odd, myEvenClass: even }">
        <div>{{path.xyz}}</div>
        <div>{{path.salesItem}}</div>
        <div>{{path.path1}}</div>
        <div>{{path.path2}}</div>
    </div>
</div>

Documentation.

【讨论】：

这个方案很直接，超棒

【解决方案2】：

使用 CSS 的nth-child selector:

scrollbars > div:nth-child(even) {background-color: #f2f9ff;}
scrollbars > div:nth-child(odd) {background-color: #eceff3;}

尽量避免在不需要的地方添加模板逻辑，在这种情况下，您不需要 - CSS 可以完成所有工作，并且效率比 高几个数量级使用模板指令。

【讨论】：