Comment comparer les dates en utilisant ngIf en angulaire 2 et mettre à jour le fond de la carte en conséquence?

Question

J'ai "md-grid-list" pour afficher les cartes dans la grille. Je boucle mon tableau de données en utilisant "ngFor". Comment comparer chaque élément datetime du tableau avec le DateTime donné en utilisant "ngIf"? et si la condition passe avec succès, la couleur de la carte doit être réglée au vert et si la condition n'est pas satisfaite, la couleur de la carte est réglée sur une couleur différente.

<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 utilise des objets pour stocker les valeurs de date. Lorsque vous voulez comparer si deux dates sont égales, ne faites pas cette date1 === date2. Cela vous dira simplement si les deux variables référencent le même objet.

Pour vérifier si deux dates sont égales, utilisez la méthode getTime() de l'objet date. Comme ceci:

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

Soyez prudent car toute différence en secondes ne correspondra pas aux dates.

Dans votre cas, il sera:

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

Si les dates formats sont en horodatage Unix:

ngIf="data.myDatetime < myCurrentDateTime" 

Hope it helps