Angular 4 Timer en cours d'exécution trop rapide

Question

J'essaie de créer une horloge simple dans Angular 4 qui va cocher chaque seconde, mais lorsque le code suivant est exécuté, il se met à clignoter trop rapidement.

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

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

    timer: number = 0; 

    constructor() { 

    } 

    ngOnInit() { 
    } 

    timeIt() { 
    this.timer++; 
    } 

    upTick() { 
    return setInterval(() => { 
     this.timeIt() 
    }, 1000); 
    } 


} 

// HTML

<p> 
{{ upTick() }} 
<button 
    type="submit" 
    (click)="startStop()">Start/Stop 
</button> 
</p> 

application de ce code en JavaScript en utilisant la fonction setInterval() seul avec le paramètre foisIl() et 1000 œuvres pour chaque seconde, ne sais pas ce qui ne va pas ici TypeScript

Answer 1

Comme indiqué dans les commentaires, les modèles angulaires sont rendus plusieurs fois.

Vous n'avez donc besoin que d'un seul intervalle à la fois.

setInterval() renvoie un ID pour que vous puissiez le gérer.

Modifier votre code un peu j'ai fini avec cette

@Component({ 
    selector: 'main', 
    template: ` 
    <div> 
    {{timer}} 
    <button (click)="startStop()">Start/Stop</button> 
    </div> 
    ` 
}) 
export class MainComponent implements OnInit { 

    timer : number = 0; 
    intervalId : number; 

    constructor() { 
    } 


    start() { 
     this.intervalId = setInterval(() => { 
     this.timeIt() 
     }, 1000); 
    } 

    stop() { 
     clearInterval(this.intervalId); 
     this.intervalId = -1; 
    } 

    startStop() { 
     if(this.intervalId == -1) { 
     this.start(); 
     } else { 
     this.stop(); 
     } 
    } 

    timeIt() { 
    this.timer++; 
    } 

    ngOnInit() { 
     this.start(); 
    } 
} 

http://plnkr.co/edit/Mu1k05WXHhijWDjahd0Y?p=preview