1
votes

Rendre du texte dynamique en fonction de l'heure de la journée - Angular 7

Je souhaite afficher un message différent dans mon modèle, en fonction de l'heure de la journée. Dans cette application spécifique, je souhaite indiquer la pré-commercialisation, le marché libre et le marché secondaire pour la bourse américaine.

Actuellement, j'affiche l'heure actuelle.

Voici ce que j'utilise dans mon template.

export class ScoreCardsComponent implements OnInit{
  score$: Observable<any[]>;
  time = new Date();

  constructor(private updatesService: LiveUpdatesService) {
    this.score$ = this.updatesService.getScore();
  }

  ngOnInit() {
      setInterval(() => {
        this.time = new Date();
      }, 1000);
  }

}

Voici ce que j'ai dans mon fichier de composant.

<div class="score clock">
     <span class="score-title">Current Time</span>
     <span class="score-stat time">{{ time | date: 'hh:mm:ss' }}</span>
     <span class="score-stat-post">{{ time | date: 'M.d.yy' }}</span>
</div>

Je veux en faire le .score L'élément -title est dynamique. Par exemple, de 9 h à 9 h 30 afficherait «Avant commercialisation», de 9 h 30 à 16 h 00 afficherait «Ouvert», de 16 h 00 à 18 h 00 afficherait «Marché secondaire» et le temps restant afficherait «Fermé».

Je suis très nouveau dans Angular, donc n'importe quelle direction à ce sujet serait utile!

typescript angular

0 commentaires

4 Réponses :

2
votes

Et cette approche? Utilisez la fonction pour définir une chaîne dans votre intervalle si cela doit vraiment se produire en temps réel.

getStatus() {
    const hour = new Date().getHours();
    const minutes = new Date().getMinutes();
    const total = hour * 60 + minutes;

    if (hour >= 9 && total < (9 * 60 + 30)) {
        return 'Premarket';
    } else if (total >= (9 * 60 + 30) && hour < 16) {
        return 'Open';
    } else if (hour >= 16 && hour < 18) {
        return 'Aftermarket';
    } else {
        return 'Closed';
    }
}

1 commentaires

envisagez plutôt de le refactoriser en un tuyau. Dans ce cas, vous devrez faire {{getStatus ()}} . Il n'est généralement pas conseillé d'appeler des méthodes de cette manière.

1
votes

Créez un nouveau tube de date comme celui-ci:

var hours = date.getHours();
var minutes = date.getMinutes();
if (hours == 9 && minutes <= 30) {
    return "Pre Market"
}

Vous pouvez vérifier l'heure en faisant quelque chose comme ceci:

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

@Pipe({ name: 'dateTitlePipe' })
export class DateTitlePipe implements PipeTransform {
    // adding a default format in case you don't want to pass the format
    // then 'yyyy-MM-dd' will be used
    transform(date: Date | string): string {
        date = new Date(date);  // if orginal type was a string
        if(// Date between something)
            return 'Title you want to show'
        }
    }
}

0 commentaires

1
votes

Vous pouvez le faire avec des observables. Et comme @ user3153298 a déjà fourni un excellent moyen de suivre l'heure, sans avoir besoin de bibliothèques supplémentaires, vous pouvez le faire comme ceci ...

  import { interval } from 'rxjs';

  yourMessage: string;

  //emit value in sequence every 1 second
  source = interval(1000);
  subscribe: any


  constructor() {
    this.source.subscribe(() => {
      const hour = new Date().getHours();
      const minutes = new Date().getMinutes();
      const total = hour * 60 + minutes;

      if (hour >= 9 && total < (9 * 60 + 30)) {
        this.yourMessage = 'Premarket';
      } else if (total >= (9 * 60 + 30) && hour < 16) {
        this.yourMessage = 'Open';
      } else if (hour >= 16 && hour < 18) {
        this.yourMessage = 'Aftermarket';
      } else {
        this.yourMessage = 'Closed';
      }
    });
  }

0 commentaires

1
votes

Je créerais un nouveau tube personnalisé pour gérer cela. Voici une démo fonctionnelle sur stackblitz.

Votre modèle ressemblera à:

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

@Pipe({
  name: "timerLabel"
})
export class TimerLabelPipe implements PipeTransform {
  transform(dateTime: Date): string {
    // const dateTime = new Date('2019-11-08T18:38:16.001Z');

    const utcHours = dateTime.getUTCHours();
    const utcMins = dateTime.getUTCMinutes();

    if (utcHours >= 18 || utcHours < 9) {
      return "Closed";
    }

    if (utcHours >= 16) {
      return "Aftermarket";
    }

    if (utcHours === 9 && utcMins < 31) {
      return "Premartket";
    }

    return "Open";
  }
}

Le timerLabel est votre tube personnalisé qui rendra la chaîne correcte.

Votre tube:

<div class="score clock">
     <div class="score-title">Current Time - {{ time | timerLabel }}</div>
     <div class="score-stat time">{{ time | date: 'hh:mm:ss' }}</div>
     <div class="score-stat-post">{{ time | date: 'M.d.yy' }}</div>
</div>

0 commentaires