使用角度在模板上显示数据

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

成分：

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

  ngOnInit() {
    this.mi_funcion();
  }

  mi_funcion () {
    setInterval(()=>{
        const now = new Date().getTime();
        const 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>

Answer 2

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

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 3

您的组件应该在主 HTML 中作为元素使用，如下所示：

<app-countdown></app-countdown>

不需要直接使用你的类，所以删除行：

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

并在 ngOnInit() 函数中使用 mi_funcion 的初始化。

Answer 4

您的代码中有一些需要改进的地方： 使您的变量全局化

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

致敬！