0

Estoy tratando de hacer mi primer componente en angular, he checho esto en el archivo .ts, pero no se como se hace para que el countdown aparezca en el template, me imagino que debo llamar la función que lo ejecuta en en dicho template pero no se como hacerlo....................................... ....................................................................

Gracias por su ayuda

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-countdown',
  templateUrl: './countdown.component.html',
  styleUrls: ['./countdown.component.css']
})
export class CountdownComponent implements OnInit {
  countDownDate: number;
  now: number;
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  distance: number;

  constructor(countDownDate_:number) { 
    this.countDownDate = countDownDate_;
  }

  mi_funcion () {

    let _self = this;


    let x = setInterval(function():void{

        _self.now = new Date().getTime();

        let distance: number = _self.countDownDate - _self.now
        let days:number = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours:number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes:number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds:number = Math.floor((distance % (1000 * 60)) / 1000);

        console.log( `Faltan:  ${days} Dias, ${hours} Horas,  ${minutes} Minutos, ${seconds} Segundos`);

        if (distance < 0){
            clearInterval(x);

            console.log("El tiempo para preventa he terminado");
        }

    },1000);

}    

  ngOnInit() {
  }

}

let countDownDate_:number = new Date ("Jan 5, 2021 15:37:25").getTime();

let instancia = new MyCountDown(countDownDate_);
instancia.mi_funcion() 

//Html

<div class="row">
    <div class="col-3">Dias: </div>
    <div class="col-3">Horas: </div>
    <div class="col-3">Minutos</div>
    <div class="col-3">Segundos</div>
</div>

2 respuestas 2

1

Primeramente de donde sacas la clase MyCountDown

Si quieres obtener los valores de la fecha ejecutando la función mi_funcion ponla en la función ngOnInit.

Si quieres acceder a estas variables en tu template no sera posible por que al usar el {{ days }} haces referencia a las propiedades del componente y tu quieres hacer referencia a las siguientes variables.

let distance: number = _self.countDownDate - _self.now
        let days:number = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours:number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes:number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds:number = Math.floor((distance % (1000 * 60)) / 1000);

Yo modificaria la funcion de esta manera:

mi_funcion () {

    let _self = this;


    let x = setInterval(function():void{

        _self.now = new Date().getTime();

        let distance: number = _self.countDownDate - _self.now
        _self.days = Math.floor(distance / (1000 * 60 * 60 * 24));
        _self.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        _self.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        _self.seconds = Math.floor((distance % (1000 * 60)) / 1000);

        console.log( `Faltan:  ${_self.days} Dias, ${_self.hours} Horas,  ${_self.minutes} Minutos, ${_self.seconds} Segundos`);

        if (distance < 0){
            clearInterval(x);

            console.log("El tiempo para preventa he terminado");
        }

    },1000);

}    
0

Tienes que interpolar los datos con el uso de dobles llaves ( {{ }} ).

Por ejemplo:

<div class="row">
    <div class="col-3">Dias: {{days}}</div>
    <div class="col-3">Horas: {{hours}}</div>
    <div class="col-3">Minutos: {{minutes}}</div>
    <div class="col-3">Segundos: {{seconds}}</div>
</div>

Solo aclarar que:

Estas declarando esas variables fuera de la función, pero después haces otra declaración dentro de tu función, lo que te podría ocasionar problemas... Lo mas conveniente seria que solo hagas las asignaciones a las variables declaradas al principio de tu clase para poder usarlas dentro de tu archivo html

4
  • Pues le hice los cambios de las variables y coloque los valores con las llaves dobles y no muestra nada no parece que la info vaya en {{}}, No debo ejecutar la funcion ene l html antes interpolar o algo así? Commented el 7 sept. 2019 a las 4:27
  • En realidad bastaría con hacer tu setInterval dentro del ngOnInit, para que se ejecute cuando el componente esté cargado Commented el 7 sept. 2019 a las 4:41
  • Y corrije tus variables, creo que declaraste algunas variables fuera de la clase Commented el 7 sept. 2019 a las 4:44
  • ya puse la variable countdownDate dentro de la funcion pero sigue igual Commented el 7 sept. 2019 a las 5:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.