Question

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

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：

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

Answer 1

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

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

更改特定数据的颜色

1 个答案: