angular 2のngClassEvenngClassOddを実装する

Question

angular 2アプリケーションで、ng-class-evenおよびng-class-odd（from 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は、ローカル変数にエイリアスできるいくつかのエクスポートされた値を提供します。

• indexは、各テンプレートコンテキストの現在のループ反復に設定されます。
• firstは、アイテムが反復の最初のものであるかどうかを示すブール値に設定されます。 （beta.15以降）
• lastは、アイテムが反復の最後のものであるかどうかを示すブール値に設定されます。
• evenは、このアイテムのインデックスが偶数かどうかを示すブール値に設定されます。
• oddは、このアイテムのインデックスが奇数かどうかを示すブール値に設定されます。

プランカー

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