为 Angular 2 实现 ngClassEven ngClassOdd答案

【问题标题】：Implementing ngClassEven ngClassOdd for angular 2为 Angular 2 实现 ngClassEven ngClassOdd
【发布时间】：2016-03-30 16:12:32
【问题描述】：

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

【问题讨论】：

标签： angularjs angular angularjs-ng-class-even angularjs-ng-class-odd

【解决方案1】：

旧方式

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（关键字）

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

【讨论】：

这应该被更新以摆脱#并使用'let'。最新 ng2 中的正确用法是 let isEven=even 等。

【解决方案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

【讨论】：

我自己在创建 plunker 时遇到了错误。这些变量需要像#index=index这样的赋值。
这工作谢谢

【解决方案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。

【讨论】：

你应该接受解决你问题的答案。
已接受感谢您告诉我，虽然不知道 ;)