为角度2实现ngClassEven ngClassOdd

Question

我尝试在角度2应用程序中实现ng-class-even和ng-class-odd(来自angular 1)类型行为.

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

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;
}

Answer 1

旧方式

演示: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(关键字)

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

Answer 2

更新(Angular4)

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

原创(Angular2)

这应该工作:

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

NgFor 提供了几个可以别名为局部变量的导出值:

• index 将被设置为每个模板上下文的当前循环迭代.
• first将被设置为一个布尔值,指示该项是否是迭代中的第一个项.(自beta.15)
• last 将被设置为一个布尔值,指示该项是否是迭代中的最后一项.
• even 将设置为一个布尔值,指示此项是否具有偶数索引.
• odd 将被设置为一个布尔值,指示此项是否具有奇数索引.

Plunker

另见https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html