How can a PROGRESS BAR of seconds in ionic 3 and angular 5 be done?

1

The main problem is that it does not show me the dynamically progressPercent variable of the online-game.ts.

Hello my problem is that it does not show me the variable in the html as it decreases as I have a setInterval of 60 seconds ... so every time a second passes this variable decreases one in its value .. and the variable that I have if it executes well as it goes backing down from 60 seconds to 0, and it shows me an alert like it's over, the thing is that it does not show this variable dynamically as it removes 1 from the variable ...

This is the part where I call the page where I want to go and run that countdown counter just click on that button PlayOnline ();

home.html

                   <ion-header>
          <ion-navbar>
            <ion-title text-center>Jugar</ion-title>
          </ion-navbar>
        </ion-header>

        <ion-content padding>
          <button ion-button full>
            <ion-icon ios="ios-add" md="md-add" (click)="jugarOnline();"> Partida Online</ion-icon>
          </button>
          <ion-content>

home.ts

      import { Component } from '@angular/core';
      import { NavController } from 'ionic-angular';
      import { JugarOnlinePage } from '../jugar-online/jugar-online';

      @Component({
        selector: 'page-home',
        templateUrl: 'home.html'
      })
      export class HomePage {

        constructor(public navCtrl: NavController) {

        }
        ionViewDidLoad() {
          console.log('ionViewDidLoad HomePage');
        }
        jugarOnline(){
          this.navCtrl.push(JugarOnlinePage);
        }
      }

I leave the html code and the ts so they can help me out.

play-online.html

          <ion-header>

            <ion-navbar>
              <ion-title text-center>Jugar</ion-title>
            </ion-navbar>

          </ion-header>

          <ion-content padding>
            <div class="card">
              <div class="item item-text-wrap">
                <div class="loader">
                  <p class="percent">{{progressPercent}}segundos</p>
                </div>
              </div>
            </div>
          </ion-content>

play-online.ts

          import { Component } from '@angular/core';
          import { IonicPage, NavController, NavParams } from 'ionic-angular';

          @IonicPage()
          @Component({
            selector: 'page-jugar-online',
            templateUrl: 'jugar-online.html',
          })
          export class JugarOnlinePage {
            progressPercent;
            constructor(public navCtrl: NavController, public navParams: NavParams) {
              var count = 60;
              var intervalo = setInterval(function () {
                console.log(count);
                count--;
                this.progressPercent = count;
                if (count == 0) {
                  clearInterval(intervalo);
                  alert("Se terminó");
                }
              }, 1000);
            }

            ionViewDidLoad() {
              console.log('ionViewDidLoad JugarOnlinePage');
            }

          }
    
asked by Daniel 18.03.2018 в 20:25
source

0 answers