为 angular 2 实施 ngClassEven ngClassOdd

Question

我尝试在 angular 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

更新（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 provides several exported values that can be aliased to local variables:

index will be set to the current loop iteration for each template context.

first will be set to a boolean value indicating whether the item is the first one in the iteration. (since beta.15)

last will be set to a boolean value indicating whether the item is the last one in the iteration.

even will be set to a boolean value indicating whether this item has an even index.

odd will be set to a boolean value indicating whether this item has an odd index.

Plunker

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

Answer 2

老办法

演示 : 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 3

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

以上代码运行良好。

谢谢 Gunter，micronyks。

为 angular 2 实施 ngClassEven ngClassOdd

Implementing ngClassEven ngClassOdd for angular 2

angularjs

angularjs-ng-class-even

angularjs-ng-class-odd

angular