css 如何在时间不可用时在日历中应用红色

Question

我想在应用背景红色时显示不可用时间，这是一张图片说明我想做什么

我有工作时间，例如 8H 到 17H，如果其中一个小时不可用，我想应用红色，我该怎么做？我想将我的日期 "heure" 保存到数组 JSON ？还是直接 JSON ？这就是我尝试的方式

  constructor(private _calendar: CalendarModel) {
    let plageJour = this.trancheFin - this.trancheDeb;

    for (let i = 0; i < plageJour; i++) {
      this.libelleTranche.push({"heure":"i + this.trancheDeb","unvailable":true});
    }

  }

如果时间不可用我申请

    <a *ngIf="???" [ngStyle]="{background:invailable}">
        {{ heure }}H-{{heure+1}}H
    </a>

import { Component, OnInit } from '@angular/core';
import { CalendarModel } from '../calendar-model';

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

  invailable="red";
  trancheDeb: number = 8;
  trancheFin: number = 17;
  dateNow0: number;//le début du jour d'aujourdh'ui à 00H en timestamp

  libelleTranche = new Array(); //calculé fin de tranche - debut de tranche

  constructor(private _calendar: CalendarModel) {
    let plageJour = this.trancheFin - this.trancheDeb;

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

  }

Answer 1

思路是对的，但是有几点不对：

在您的模板中，您写了 inavailable 而不是 heure.unavailable
{"heure":"i + this.trancheDeb"} 应该是 {"heure": i + this.trancheDeb}
{ background : heure.unavailable } 只会产生 { background : true } 或 { background : false } 不会做任何事情。

相反，设置 class :

<a [class.red]="heure.unavailable">

或者：

<a [ngClass]="{ red : heure.unavailable }">

并在 CSS 中：

a.red{
  background-color : red;
}

Answer 2

这是我的新片段

import { Component, OnInit } from '@angular/core';
import { CalendarModel } from '../calendar-model';

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

  trancheDeb: number = 8;
  trancheFin: number = 17;
  dateNow0: number;//le début du jour d'aujourdh'ui à 00H en timestamp

  libelleTranche = new Array(); //calculé fin de tranche - debut de tranche

  constructor(private _calendar: CalendarModel) {
    let plageJour = this.trancheFin - this.trancheDeb;

    for (let i = 0; i < plageJour; i++) {
      this.libelleTranche.push({
        "afficheH":i + this.trancheDeb,
        "unavailable":this.isDayReserver(this.dateNow0+this.trancheDeb,this.trancheDeb+1*60*60)
      });
    }
    console.log(this.libelleTranche);

  }

我以例子发布

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

css 如何在时间不可用时在日历中应用红色

how css apply red in calendar when the time is unvailable

css

angular-ng-if

angular