私は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>
クラスを列ではなく行に配置するより良い方法はありますか?前もって感謝します。
最初のコード例は正常に動作しています 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'];
}
let index = index;
[インデックス] =インデックス;
次に[class.odd] = "index%2";
私のために働いた
<ion-card *ngFor ="let item of itemsCat; let odd=odd; let even=even " [ngClass]="{ odd: odd, even:even}" >
.....
</ion-card>
odd
でない場合は、とにかくeven
です。したがって、数バイトとサイクルを節約します。
<div *ngFor="let meeting of meetingList; let odd = odd" [ngClass]="odd ? 'odd' : 'even'">
{{meeting}}
</div>
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>