ngFor在行和列上使用ngClass问题 [英] ngFor using ngClass on rows and columns issue
本文介绍了ngFor在行和列上使用ngClass问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Angular2及其ngFor.我想将类添加到奇数行和偶数行,因此可以按颜色将它们视觉上分开.
I am using Angular2 and its ngFor. I want to add class to odd and to even rows, so I can separate them visually by color.
这是我的代码(实际上不起作用):
Here is my code (which does not work really):
<div *ngFor="#meeting of meetingList; #index=index; #odd=odd; #even=even;"
class="row"
[ngClass]="{ odd: odd, even: even }
">
<div class="col"></div>
<div class="col"></div>
</div>
尽管我这样做是这样,代码仍然有效:
Although if I do it like this, code works:
<div *ngFor="#meeting of meetingList; #index=index; #odd=odd; #even=even;"
class="row"
">
<div class="col" [ngClass]="{ odd: odd, even: even }"></div>
<div class="col" [ngClass]="{ odd: odd, even: even }"></div>
</div>
是否有更好的方法将类放到行而不是列?预先谢谢你.
Is there any better way to put class to row instead to columns? Thank you in advance.
推荐答案
您的第一个代码示例运行正常 柱塞示例
Your first code example is working fine Plunker example
@Component({
selector: 'my-app',
styles: [`
.even { color: red; }
.odd { color: green; }
`],
template: `
<h2>Hello {{name}}</h2>
<div *ngFor="let meeting of meetingList; let index=index; let odd=odd; let even=even;"
class="row"
[ngClass]="{ odd: odd, even: even }">{{meeting}}
<div class="col"></div>
<div class="col"></div>
</div>
`
})
export class App {
meetingList = ['a', 'b', 'c'];
}
这篇关于ngFor在行和列上使用ngClass问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文