如何启动通过setInterval方法与buttonClick一起使用的函数

Question

我正在尝试在Ionic中制作一个ProgressBar，在这里我要求用户以秒为单位的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>