I'm trying to make a ProgressBar in Ionic where I ask the user for timeInput in seconds.
(我正在尝试在Ionic中创建一个ProgressBar，在此我要求用户以秒为单位的timeInput。)
When the user clicks on a button the ionic Progressbar should start going down each second based on the time the user entered. (当用户单击按钮时，离子进度条应根据用户输入的时间开始每秒下降。)
So my question is basically: How can I update my ProgressBar so it goes down each second based on the input the user gives AFTER my button is clicked WITH a setInterval.
(所以我的问题基本上是：我如何更新ProgressBar，以便它在基于setInterval单击我的按钮后，根据用户提供的输入每秒下降一次。)
This is my TypeScript code:
(这是我的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'];
}
}
}
This is my HTML code:
(这是我的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>
ask by Felix translate from so 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
