html - 更改多个特定数据的颜色

Question

之前我问过更改特定数据颜色的问题:Changing colour of specific data

但是现在我有一个与此相关的问题。现在我有粉红色的 2017 年日期，我想要蓝色的 2018 年日期。如何添加第二个日期。更好的是，如何在不每年手动输入的情况下让它每年交替使用不同的颜色。不过现在我只想知道如何在之前的解决方案中添加第二年。

Json文件:

[
    {
        "id": 1,
        "month": "2017-03-01"
    }
    {
        "id": 2,
        "month": "2017-04-01"
    }
    {
        "id": 3,
        "month": "2017-05-01"
    }
    {
        "id": 4,
        "month": "2017-06-01"
    }
    {
        "id": 5,
        "month": "2017-07-01"
    }
    {
        "id": 6,
        "month": "2017-08-01"
    }
    {
        "id": 7,
        "month": "2017-09-01"
    }
    {
        "id": 8,
        "month": "2017-10-01"
    }
    {
        "id": 9,
        "month": "2017-11-01"
    }
]

我想也许 switch case 会有所帮助，但这是我的 HTML 中的内容:

<table>
  <tr>
    <th>Line 1</th>
    <th *ngFor="let volumes of volumes" [ngClass]="{ 'pink-color': checkYear(volumes.month) }">{{ volumes.month | uppercase }}</th>
  </tr>
</table>

组件.ts:

checkYear(date) {
        return new Date(date).getFullYear() == 2017 ? true : false;
}

CSS:

.pink-color {
    background-color: pink;
}

Answer 1

而不是在 ngClass 中检查年份。在 ngClass 函数中按年份返回类名。

试试这个

 [ngClass]="getClass(volumes.month)"

参与

getClass(date) {
  var year new Date(date).getFullYear();
  if(year == 2017){
    return "pink-color"
  }
  if(year == 2018){
    return "blue-color"
  }
  /*if needed can add more like yellow for 2019*/
  return "";//for other years
}

你可以为蓝色添加一个类

.blue-color {
    background-color: blue;
}