Как запустить функцию, которая использует метод setInterval, с помощью buttonClick - PullRequest
Новая
       36

Как запустить функцию, которая использует метод setInterval, с помощью buttonClick

0 голосов
/ 01 декабря 2019

Я пытаюсь сделать ProgressBar в Ionic, где я спрашиваю у пользователя timeInput в секундах. Когда пользователь нажимает кнопку, ионный индикатор выполнения должен начинать падать каждую секунду в зависимости от времени, которое пользователь ввел.

Поэтому мой вопрос в основном таков: как я могу обновить свой ProgressBar, чтобы он отключался каждую секунду на основеввод, который пользователь дает ПОСЛЕ того, как моя кнопка нажата С помощью setInterval.

Это мой код TypeScript: 

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

@Component({
  selector: 'app-timer-page',
  templateUrl: './timer-page.page.html',
  styleUrls: ['./timer-page.page.scss'],
})
export class TimerPagePage implements OnInit {

 data:any;

 seconden:any;

 formule = 1 / this.seconden;                     //The function to calculate the "speed"
                                                 //By dividing the total length by time

 snelheid = 1;

 tick() {                            //The function that is called when clicking the button
  setInterval(() => {
  this.snelheid -= this.formule;        //The function for lowering my progressbar
  }, 1000);
}

constructor(private route: ActivatedRoute, private router: Router) {
  this.tick = this.tick.bind(this);                //Trying to bind the function to my constructor
 }

ngOnInit() {
  if (this.route.snapshot.data['special']) {
    this.data = this.route.snapshot.data['special'];
  }
}

}

Это мой код HTML: 

<body>
<div id="container">
<div>
<ion-text> Initial time in seconds you entered:{{data.tijd}} </ion-text>
<ion-text> Initial color you chose:{{data.kleur}} </ion-text>
</div>
<div>
<ion-text>Re-enter your initial time:</ion-text>

<ion-input [(ngModel)]="seconden">-></ion-input>   <!--Where I ask the user for a time in seconds-->

<ion-text>Re-enter your initial color:</ion-text>

<ion-input [(ngModel)]="couleur">-></ion-input>

<ion-button (click)="tick()"></ion-button>                 <!--Where I call the function "tick()"-->

</div>

<ion-text>
{{seconden}}
</ion-text>
<ion-progress-bar color="primary" [value]="snelheid"></ion-progress-bar>

</div>
</body>
...