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"
    }
]

我以为切换一个案例也许会有所帮助，但这就是我在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>

Component.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)"

在cpmponent中

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;
}

更改多个特定数据的颜色

1 个答案: