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

Question

我想定义一个类来替换角度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; odd as isOdd; even as isEven"
    [class.Odd]="isOdd" 
    [class.even]="isEven">
            <div>{{path.xyz}}</div>
            <div>{{path.salesItem}}</div>
            <div>{{path.path1}}</div>
            <div>{{path.path2}}</div>
    </div>
</div>