使用angular在模板上显示数据

Question

我正在使用angular创建我的第一个组件，这是一个倒计时，但是我不知道如何在模板上显示结果

我尝试仅使用{{}}，但没有任何反应

感谢您的帮助 ................................................... ................................................... ................................................... ................................................... .......................................

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

@Component({
  selector: 'app-countdown',
  templateUrl: './countdown.component.html',
  styleUrls: ['./countdown.component.css']
})

export class CountdownComponent implements OnInit {

  mi_funcion () {


    let x = setInterval(function():void{

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

        let distance: number = countDownDate - 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 instancia = new CountdownComponent();
instancia.mi_funcion()



//And html 

<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>

Answer 1

您缺少组件中的属性。您可以在模板上访问的数据是组件属性。

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

 @Component({ selector: 'app-countdown', templateUrl: './countdown.component.html', styleUrls: ['./countdown.component.css'] }) 
export class CountdownComponent implements OnInit { 

days: number;
hours: number;
minutes: number;
seconds:number;

mi_funcion () {
// This function is called  every second now! Update the values as needed

let now = new Date().getTime(); let countDownDate:number = new Date ("Jan 5, 2021 15:37:25").getTime(); 
let distance: number = countDownDate - now 
this.days = Math.floor(distance / (1000 * 60 * 60 * 24)); 
this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 this.seconds = Math.floor((distance % (1000 * 60)) / 1000); 



}

ngOnInit() { 
    setInterval(this.mi_function.bind(this), 1000);
 }

}

此外，您无需为组件创建对象。 Angular为您处理。模板也很好。

Answer 2

您的组件应在您的主HTML中用作这样的元素：

let instancia = new CountdownComponent();
instancia.mi_funcion()

无需直接使用您的课程，因此请删除以下行：

httpClient.post(url).pipe(timeout(600000));

然后使用ngOnInit（）函数中的mi_funcion进行初始化。

Answer 3

您的代码中有一些需要改进的地方： 让变量变全球性

days: number;
hours: number;
minutes: number;
seconds:number;
mi_funcion ():void {
   //Tu codigo aqui
   this.hours = ....
   this.days= ....
   this.minutes= ....
   this.segundos= ....
} 

然后您在mi_function()中调用ngOnInit()，以确保您的函数运行。

最后

在您的app.component.html

输入以下代码：

<app-countdown></app-countdown>

您的完整应用程序 https://stackblitz.com/edit/angular-rpeugj

礼炮！

Answer 4

组件：

export class CountdownComponent implements OnInit {
  days: number;
  hours: number;
  minutes: number;
  seconds:number;
  constructor() { }

  ngOnInit() {
    this.mi_funcion();
  }

  mi_funcion () {
    setInterval(()=>{
        let now = new Date().getTime();
        let countDownDate:number = new Date ("Jan 5, 2021 15:37:25").getTime();

        let distance: number = countDownDate - now
        this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
        this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
        //console.log( `Faltan:  ${days} Dias, ${hours} Horas,  ${minutes} Minutos, ${seconds} Segundos`);
    },1000);

}  

}

模板：

<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>

模板：app.component.html

<app-countdown></app-countdown>