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

Question

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

我有工作时间，例如 8 小时到 17 小时， 如果其中一个小时不可用，我想应用红色，我该怎么做？ 我想将我的日期“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);
    }

  }

Answer 1

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

• 在您的模板中，您编写了 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;
}