为 angular 2 实现 ngClassEven ngClassOdd [英] Implementing ngClassEven ngClassOdd for angular 2
本文介绍了为 angular 2 实现 ngClassEven ngClassOdd的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试在 angular 2 应用程序中实现 ng-class-even 和 ng-class-odd(来自 angular 1)类型的行为.
我已经编写了下面的代码并且它工作正常,我想知道是否还有其他方法可以做到这一点.
HTML
<div *ngFor="#employee of employee; #index = index" [class.odd]="index%2==1" [class.even]="index%2==0" [class.selected]="员工 === selectedEmployee"><p>{{employee.name}}</p>
CSS
.odd {背景色:#f2f9ff;}.甚至 {背景颜色:#eceff3;}
解决方案
老方法
演示:http://plnkr.co/edit/YkcudQipF1c8iT5LCRyd?p=预览
<div *ngFor="#employee of员工;#索引=索引;#isOdd=奇数;#isEven=偶数"[class.odd]="isOdd"[class.even]="isEven"[class.selected]="employee === selectedEmployee"><p>{{employee.name}}</p>
<小时>新方式
用let
(关键字)
#
<div *ngFor="让员工的员工;让指数 = 指数;让 isOdd=odd;让 isEven=even"[class.odd]="isOdd"[class.even]="isEven"[class.selected]="employee === selectedEmployee"><p>{{employee.name}}</p>
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;
}
解决方案
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>
New Way
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屋!