如何将 css 设置为 angular 中的交替行 4

Question

我想在angular中定义一个class来交替行 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; }

Answer 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.

Answer 2

使用CSS的nth-child selector:

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

尽量避免在不需要的地方添加模板逻辑，在这种情况下，您不需要 -- CSS 可以做到这一切并且是 的命令比使用模板指令更有效。

如何将 css 设置为 angular 中的交替行 4

How set css to alternating rows in angular 4

css

rows

alternating

angular