Как установить css для чередующихся строк в угловых 4 - PullRequest
Новая
       64

Как установить css для чередующихся строк в угловых 4

0 голосов
/ 14 ноября 2018

Я хотел бы определить класс для чередующихся строк в угловых 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; }

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Использование CSS nth-child селектор : 

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

Старайтесь избегать добавления шаблонной логики там, где вам это не нужно, и в этом случае вам не нужно - CSS может сделать все это и на несколько порядков эффективнее, чем использование шаблонной директивы.

0 голосов
/ 14 ноября 2018

да, вы можете использовать нечетные и четные локальные переменные в 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>
...