即使使用angular5颜色也很奇怪

lcms教育怪胎

我，这是我的日历小时模板：

<ul class="heure" *ngFor="let heure of libelleTranche; let even = even; let odd = odd" [ngClass]="{ odd: odd, even: even } ">
    <li >{{ heure }} H</li>
</ul>

我想少用这个CSS：

.heure{
    li{
        float: left;
        width:2.5em;
    }
}
.even { background-color: red; }
.odd { background-color: green; }

我的结果是：

Lun
  
10 H
11 H
12 H
13 H
14 H
15 H

我将显示小时数增加和事件以提高可见性，我的组件在这里：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heure',
  templateUrl: './heure.component.html',
  styleUrls: ['./heure.component.css']
})
export class HeureComponent implements OnInit {

  trancheDeb = 0;
  trancheFin = 24;
  libelleTranche=new Array(); //calculé fin de tranche - debut de tranche
  constructor() { 
    let plageJour = this.trancheFin - this.trancheDeb;

    for(let i=0;i<plageJour;i++){
      this.libelleTranche.push(i);
    }

    console.log(this.libelleTranche);
  }

}

如何正确设置奇数小时和事件小时的颜色？感谢您的回复:)

Pankaj Parkar

even和odd可变通过提供ngFor指令是基于currentElement index。对于您的情况，应根据计算结果设置odd＆even值(heure % 2)。

<ul class="heure" 
  *ngFor="let heure of libelleTranche" 
  [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } ">
    <li >{{ heure }} H</li>
</ul>

在这里演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。