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

我想在红色背景中显示不可用的时间，这是一张图片
解释我想做什么



我有几个小时的工作时间，例如8H至17H，
如果一个小时不可用，我想涂红色，该怎么办？
我想将日期“ heure”保存到Array 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);
    }

  }

最佳答案

这个想法是正确的，但是有一些错误的事情：


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


而是设置一个类：

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

或者：

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

并在CSS中：

a.red{
  background-color : red;
}