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>

有没有更好的方法将类放到行而不是列?提前谢谢你。

【问题讨论】:

&lt;div *ngFor="#meeting of meetingList; #index=index; #odd=odd; #even=even;" [class.odd]="odd" [class.even]="even" class="row"&gt; 这与我的解决方案没有什么不同,我认为问题在于您尝试添加类的位置 - 什么级别。还是谢谢你。 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的主要内容,如果未能解决你的问题,请参考以下文章

Pandas DataFrame:如何在行和列范围内获得最小值

如何在行和列中排列对象并在.svg中导出[关闭]

怎么把表格扩大?

wps表格格子怎么放大

Snapde怎么添加行和列

在二维数组中的行和列处查找最大值