ngFor 在行和列问题上使用 ngClass
Posted
技术标签:
【中文标题】ngFor 在行和列问题上使用 ngClass【英文标题】:ngFor using ngClass on rows and columns issue 【发布时间】:2016-07-22 09:40:06 【问题描述】:我正在使用 Angular2 及其 ngFor。我想为奇数行和偶数行添加类,这样我就可以通过颜色在视觉上将它们分开。
这是我的代码(实际上并不适用):
<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>
虽然如果我这样做,代码可以工作:
<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>
有没有更好的方法将类放到行而不是列?提前谢谢你。
【问题讨论】:
<div *ngFor="#meeting of meetingList; #index=index; #odd=odd; #even=even;" [class.odd]="odd" [class.even]="even" class="row">
这与我的解决方案没有什么不同,我认为问题在于您尝试添加类的位置 - 什么级别。还是谢谢你。
Is there any better way to put class to row instead to columns?
,那是什么意思?
@EricMartinez 谢谢,已解决。
【参考方案1】:
如果不是odd
,那么无论如何都是even
。所以,节省一些字节和周期:
<div *ngFor="let meeting of meetingList; let odd = odd" [ngClass]="odd ? 'odd' : 'even'">
meeting
</div>
您可以更进一步,只在 css 中使用 nth-child
选择器和 odd
关键字:
<style>
p:nth-child(odd)
background: gray;
p:nth-child(even)
background: white;
</style>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
【讨论】:
【参考方案2】:为我工作
<ion-card *ngFor ="let item of itemsCat; let odd=odd; let even=even " [ngClass]=" odd: odd, even:even" >
.....
</ion-card>
【讨论】:
【参考方案3】:让索引=索引;
然后 [索引] = 索引;
然后 [class.odd] = "index%2";
【讨论】:
【参考方案4】:您的第一个代码示例运行良好 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'];
【讨论】:
谢谢,我的 CSS 有错误。 你对奇偶偶奇奇偶奇......旋转有什么想法吗? @Mukyuu 应该很容易根据index
计算颜色。以上是关于ngFor 在行和列问题上使用 ngClass的主要内容,如果未能解决你的问题,请参考以下文章