时间戳

首页 > 解决方案 > 如何比较 Angular 和 CSS 中的截止日期？

angular - 如何比较 Angular 和 CSS 中的截止日期？

问题描述

我是 Angular 8 的新手，刚刚学习了使用插值和 .toMillis 进行时间戳到字符串的转换，但是我想在我的项目应用程序上改进这个。

我正在尝试将我的 Firestore 中保存的日期与今天的当前日期进行比较，以显示截止日期。

如果日期距离截止日期不少于一天，我的数据占位符背景应该是绿色的

如果日期比截止日期少 1 天，我的数据占位符背景应该是橙色

如果日期超过截止日期，我的数据占位符背景应该是红色的。

标签： angularfirebasegoogle-cloud-firestore

解决方案

我写了一个示例Stackblitz，指导如何使用管道进行更改background-color

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dateCss'
})
export class DateCssPipe implements PipeTransform {
  transform(value: any, args?: any): any { // write you comparator here
    if(new Date(value) > new Date()){
      return 'bg-red';
    }
    else {
      return 'bg-orange';
    }
  }
}

dateCss是管道的名称 xyzDate并且xyzDate2是变量

<div class="{{ xyzDate | dateCss }}">XYZ {{xyzDate | date: 'medium'}}<div>
<div class="{{ xyzDate2 | dateCss }}">XYZ2 {{xyzDate2 | date: 'medium'}}

关于编写管道的Angular Doc

推荐阅读