仅当日期是今天使用 *ngIf 时才应用课程答案

【问题标题】：Apply class only if the date is today with *ngIf仅当日期是今天使用 *ngIf 时才应用课程
【发布时间】：2017-09-13 04:28:51
【问题描述】：

这是我尝试过的。

HTML：

<span *ngIf="!today" class="not-today">{{operation}}</span>
<span *ngIf="today" class="today">{{operation}}</span>

组件：

 private today: any;
 this.today = new Date().getTime();

只有在今天才需要应用 span.today 类（.not-today 到不是“今天”的跨度），这样我就可以得到所有带有 .not-today 类的跨度。我怎样才能做到这一点？

谢谢。

【问题讨论】：

您没有将today 与任何东西进行比较...您的逻辑与if(1492439523893) 相同，这始终是正确的
它总是今天 :) 认真的现在 - 什么需要等于今天？如果您只检查 if(today) - 这将始终返回 true。
哦是的..你是对的......
谢谢大家，但是今天我应该匹配什么？我需要今天的整个范围，从 00:00 到 23:59..
不要写private today: any; this.today = new Date().getTime();，而是写today = new Date().getTime();。这样你的代码就可以很好地键入。

标签： javascript html angular date typescript

【解决方案1】：

假设您的 operation 变量是一个对象，并且该对象具有时间类型的属性，取决于该时间与什么相关您想为您的跨度分配特定类的当前时间元素。

有两种方法可以做到这一点：

ngClass

一种是通过让方法返回相关类来利用ngClass 属性，即：

getClassFromDate(date: Date) {

   let match = date.getTime(); // convert date to number

   let today = new Date().setHours(0,0,0,0); // get present day as number
   let day = (n) => today + (86400000 * n); // assuming all days are 86400000 milliseconds, then add or remove days from today

   if (match >= day(1) && match < day(2))
      return 'tomorrow';
   else if (match >= today && match < day(1))
      return 'today';
   else if (match < today && match > day(-2))
      return 'yesterday';
   else
      return 'other';

}

然后在你的模板中：

<span [ngClass]="getClassFromDate(operation.date)">{{operation.text}}</span>

当然，在你的样式表中包含相关的类：

.tomorrow {...}
.today {...}
.yesterday {...}
.other {...}

class.className

你的类也可以像这样附加：

<span [class.tomorrow]="tomorrow" [class.today]="today" [class.yesterday]="yesterday" [class.other]="!tomorrow && !today && !yesterday">{{operation}}</span>

在这种情况下，它采用boolean 并在表达式等于 true 时应用该类。但请注意，您需要重写处理日期的逻辑。

您可以详细了解这两个here 之间的区别。作为一般经验法则，ngClass 适用于您应该添加多个类的情况，class.className 适用于只有一个类的情况。

【讨论】：

谢谢，那我今天应该配什么？我怎样才能做到这一点？
正如已经指出的那样，今天总是如此。问今天是不是今天就像问一个苹果是不是一个苹果。我认为您的意思是如何将过去日期与当前日期匹配，并查看过去日期是否大于或小于午夜今天，对吗？
没错，对不起，我没说清楚……这正是我的意思。
好吧，让我们先忽略目前时区之类的东西。首先你需要确定今天是什么，你可以通过获取当前时间let present = new Date()将时钟重置为午夜let today = present.setHours(0,0,0,0)，然后你可以将它与过去的日期进行比较，让我们说let past = new Date("2016-07-25T14:39:34.527Z").getTime() 威慑if (past < today) 那么过去绝对不是今天。见这里：jsfiddle.net/dtg1zx1k
@eric.dummy 获取当月的当前日历日期：let date = new Date(today).getDate() 然后从该日期中减去一天let yesterday = new Date(today).setDate(date - 1)，现在是if (match >= yesterday && match < today)，然后是昨天。见这里：jsfiddle.net/dtg1zx1k/1

【解决方案2】：

你可以通过以下方式实现

假设“操作”为字符串，“todayDate”为当前日期（（即）实际场景今天的日期从数据库中获取）。

代码如下

HTML：

<span [ngClass]="(getTodayClass()=== 'today') ? 'today' : 'not-today'">{{operation}}</span>

CSS：

<style>
.today {
    background-color:red;
}
.not-today {
    background-color:green;
}

组件：

//declaraion
todayDate: Date;
operation: string;

private sameDays(d1: Date, d2: Date) {
    return d1.getUTCFullYear() == d2.getUTCFullYear() &&
        d1.getUTCMonth() == d2.getUTCMonth() &&
        d1.getUTCDate() == d2.getUTCDate(); //using UTC methods ensures that two equivalent days in different timezones matching
}

getTodayClass() {
    //variable assign
    this.todayDate = new Date; //this date get from database
    this.operation = "Monday";

    //check condition for database time and current time with help of UTC
    if (this.sameDays(this.todayDate, new Date)) {
        return 'today';
    } else {
        return 'not-today';
    }
}

希望这对您的期望有所帮助

【讨论】：