为angular 2实现ngClassEven ngClassOdd [英] Implementing ngClassEven ngClassOdd for angular 2

问题描述

我尝试在angular 2应用程序中实现ng-class-even和ng-class-odd(从angular 1开始)类型的行为.

I tried to implement ng-class-even and ng-class-odd ( from angular 1) type behaviour in angular 2 application.

我已经在下面编写了代码，并且可以正常工作，我想知道是否还有其他方法可以做到这一点.

I have written the code below and its working fine, I want to know if there is any other way of doing this.

HTML

<div *ngFor="#employee of employees; #index = index" [class.odd]="index%2==1" [class.even]="index%2==0" [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>
         </div>

CSS

.odd {
    background-color: #f2f9ff;

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

推荐答案

旧方法

演示: http://plnkr.co/edit/YkcudQipF1c8iT5LCRyd?p=预览

OLD way

DEMO : http://plnkr.co/edit/YkcudQipF1c8iT5LCRyd?p=preview

<div *ngFor="#employee of employees; 
             #index =index;
             #isOdd=odd;
             #isEven=even" 

     [class.odd]="isOdd" 
     [class.even]="isEven" 
     [class.selected]="employee === selectedEmployee"> 
     <p>{{employee.name}}</p>
</div>

---

新方法

用 let (关键字)替换 #

replace # by let(keyword)

<div *ngFor="let employee of employees; 
             let index =index;
             let isOdd=odd;
             let isEven=even" 

      [class.odd]="isOdd" 
      [class.even]="isEven" 
      [class.selected]="employee === selectedEmployee"> 
      <p>{{employee.name}}</p>

</div>

这篇关于为angular 2实现ngClassEven ngClassOdd的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！