更改特定数据的颜色 [英] Changing colour of specific data

问题描述

我想更改json文件中某些数据的颜色. 如果我有一个内部有日期的数据集，并且我想要浅粉红色的2017年日期.我如何在不影响2018年，2019年等的情况下实现这一目标.日期.

I want to change the colour of some data from my json file. If I have a dataset that has dates inside and I want the dates that are 2017 in light pink. How can I achieve this without effecting the 2018, 2019 ect. dates.

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"
    }
    {
        "id": 10,
        "month": "2017-12-01"
    }
    {
        "id": 11,
        "month": "2018-01-01"
    }
    {
        "id": 12,
        "month": "2018-02-01"
    }
    {
        "id": 13,
        "month": "2018-03-01"
    }
]

这是我需要编辑的HTML.我需要它，因此2017年的月份以浅粉红色显示. HTML:

This is the HTML I need editing. I need it so the months that are in 2017 display in light pink. HTML:

<table>
  <tr>
    <th>Line 1</th>
    <th *ngFor="let volumes of volumes">{{ volumes.month | uppercase }}</th>
  </tr>
</table>

推荐答案

将每个对象中的日期传递给下面的组件

Pass that Date in every object to component like below

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  volumes: any[] = [{
      "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"
    },
    {
      "id": 10,
      "month": "2017-12-01"
    },
    {
      "id": 11,
      "month": "2018-01-01"
    },
    {
      "id": 12,
      "month": "2018-02-01"
    },
    {
      "id": 13,
      "month": "2018-03-01"
    }
  ];

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

.pink-color {
  color: pink;
}

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

这是 Stackblitz

这篇关于更改特定数据的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！