Question

我有“md-grid-list”来显示网格中的卡片。我正在使用“ngFor”循环我的数据数组。如何使用“ngIf”将数组中的每个datetime元素与给定的DateTime进行比较？如果条件成功通过，卡的颜色将设置为绿色，如果条件不满足，则卡的颜色设置为不同的颜色。

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of mydata" >
        <div *ngIf="(data.myDatetime | date:'HH:mm:ss, MMMM dd') < (myCurrentDateTime |date:'HH:mm:ss, MMMM dd')">

      <md-card [style.background]="'red'" [style.minHeight]="'100%'">   
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>
    </h2>
    </md-card-content>  
    </md-card>
        </div>
  </md-grid-tile>
</md-grid-list>

Answer 1

JavaScript使用对象存储日期值。当你想比较两个日期是否相等时，不要做这个date1 === date2。这只会告诉你两个变量是否引用同一个对象。

要检查两个日期是否相等，请使用日期对象的getTime（）方法。像这样：

date1.getTime() == date2.getTime()

要小心，因为秒数的差异将无法与日期匹配。

在您的情况下，它将是：

ngIf="data.myDatetime.getTime() < myCurrentDateTime.getTime()"

如果日期格式在Unix时间戳中：

ngIf="data.myDatetime < myCurrentDateTime"

希望有所帮助

如何使用角度2中的ngIf比较日期并相应地更新卡片背景？

1 个答案: