ngFor 在行和列问题上使用 ngClass

Question

我正在使用 Angular2 及其 ngFor。我想将 class 添加到奇数行和偶数行，这样我就可以通过颜色在视觉上将它们分开。

这是我的代码（实际上不起作用）：

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

是否有更好的方法将 class 放入行而不是列？提前谢谢你。

Answer 1

您的第一个代码示例运行良好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'];
}

Answer 2

令索引=索引；

然后 [index] = index;

然后 [class.odd] = "index%2";

Answer 3

对我有用

<ion-card *ngFor ="let item of itemsCat; let odd=odd; let even=even " [ngClass]="{ odd: odd, even:even}" >
.....
</ion-card>

Answer 4

如果不是 odd，那么无论如何都是 even。所以，节省几个字节和周期：

<div *ngFor="let meeting of meetingList; let odd = odd" [ngClass]="odd ? 'odd' : 'even'">
    {{meeting}}
</div>

您可以更进一步，仅在 css 中执行此操作，使用带有 odd 关键字的 nth-child 选择器：

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

ngFor 在行和列问题上使用 ngClass

ngFor using ngClass on rows and columns issue

angular

ngfor