离子2的倒计时

Question

ionViewDidEnter() {
//----------------------------------------------------------------------LISTAGEM ALMOÇOS-------------------------------------------------------------------------------------- 
        let data = JSON.stringify({id: this.id});
        let link = *;
        this.http.post(link,data)
            .map(res => res.json())
            .subscribe(data=>{
                console.log(data);
              this.almocos = [];
              //IDs das conversas
              for (var a = 0; a < data.length; a++){
                this.foto2 = data[a][2];
                if(Number.isInteger(data[a][7])){
                  console.log(data[a][7])
                  this.tempo[0] = data[a][7] + "dias"
                  this.tempo[1] = "";
                  this.tempo[2] = "";
                }else {
                  this.tempo = data[a][7].split(":");
                  this.tempo[0] = this.tempo[0] + ":";
                  this.tempo[1] = this.tempo[1] + ":"
                }
                  
                this.tempos = [];
                this.foto =[];
                let cor;
                  let pessoas;
                  let forma;
               if (data[a][4].length == 1){
                 if(data[a][5]== this.nome){
                   data[a][2]= data[a][4][0][1]
                 }
                 pessoas = data[a][4][0][0];
                 this.foto.push(data[a][4][0][1]);
               } else if (data[a][4].length == 2) {
                 pessoas = data[a][4][0][0] + " e " + data[a][4][1][0];
                  this.foto.push(data[a][4][0][1]);
                   this.foto.push(data[a][4][1][1]);
               } else {
                 pessoas = data[a][4][0][0] + " e " + (data[a][4].length-1) + " pessoas"
                  for (var i = 0; i < data[a][4].length; i++){ 
                     this.foto.push(data[a][4][i][1]);
                  }
               }
               if(data[a][4].length > 1){
                 if(data[a][6] == 1){
                   data[a][2] = "social.png";
                   cor= "#e73C58";
                   forma = "S"
                 } else if (data[a][6] == 2){
                   data[a][2] = "profissional.png";
                    cor= "#1ab2bc";
                    forma = "P";
                 }else if (data[a][6] == 3){
                   data[a][2] = "academico.png";
                   cor= "#9b59b6";
                   forma = "A";
                 }
               }else{
                 if(data[a][6] == 1){
                    cor= "#e73C58 ";
                    forma = "S"
                  } else if (data[a][6] == 2){
                    cor= "#1ab2bc ";
                    forma = "P";
                  }else if (data[a][6] == 3){
                   cor= "#9b59b6";
                   forma = "A"
                  }
                }
                  this.cores = "#ffffff";
                  
                 
             
                  this.almocos.push(    
                    {
                      id : data[a][0],
                      dia : data[a][1],
                      foto :  data[a][2],
                      foto_anf: this.foto2,
                      estrelas : data[a][3],
                      pessoal : pessoas,
                      tipo : cor,
                      forma :forma,
                      fotos : this.foto,
                      segundo :  this.tempo[2],
                      minuto :  this.tempo[1],
                      horas : this.tempo[0]
                    });
                  
                  
           setInterval(function(){ 
             console.log("segundos");
             let segundos;
             let minutos;
             let hora;
             segundos--;
              if (segundos == 0){
              segundos = 60;
               minutos--;
               
              }
              if (minutos == 0){
              minutos = 59;
                hora--;
              } 
              segundos-- ;
              this.tempos = [];
             this.tempos.push(segundos);
            }, 1000);
            
           
              }
               
        
            }, error =>{
              console.log("erro")
            });
//----------------------------------------------------------------------FIM LISTAGEM ALMOÇOS--------------------------------------------------------------------------------------
  }

 <div style="float:right;position:relative;left:0px;position:relative;top:3px">
                            <span><ion-icon style="font-size:14px;" name="md-time"></ion-icon><span style="font-size:13px;position:relative;bottom:1px;margin-left:2px"> {{almoco.horas}}{{almoco.minuto}}{{almoco.segundo}} </span></span>
            </div>

变量是小时，分钟和秒。每个都与数据库中的日期有关，在该日期中我们可以剩下时间。我希望能够实时显示倒计时直到实际日期。

我知道可以通过可观察到的可能性，但是我不知道如何。具有整数变量的答案(例如小时= 23;分钟= 14;秒= 19(是理想的，因此我可以将数据库中的值归因于数据库。

预先感谢！

Answer 1

我注意到您的代码中一些问题可以帮助您解决问题：

1. 您应该避免更改data对象本身，而是创建一个副本并使用它。这样，您始终知道服务器的响应以及您更改的内容。

2. 您有很多"硬编码"数组索引。如果您控制了后端，则应尝试避免这种情况，而是使用具有命名属性的对象。因此，而不是这样做

   this.push(data[a][4][0][1]);
   

   您可以做

   之类的事情

   data[a].almoco.photoUrl // Depending on what you want to do, obviously
   

   看起来更好，并为您提供更可读的代码。

现在解决您的倒数问题：

首先，您的 setInterval内部循环内部，这意味着setInterval被称为每秒多次。(至少与数组中的元素一样多次(。

您还定义

let segundos;
let minutos;
let hora;

，但永远不要为它们分配一个值，因此您的IF-CHACKS将永远是错误的。

您还应避免计算从服务器获得响应的时间，而是存储从服务器获得JavaScript日期的末期。

一旦拥有，您可以在setInterval中手动计算差异(结束日期 - 当前日期，请确保仅调用一次(，然后使用自定义的角管将秒钟转换为良好格式，或使用这样的NPM结节：https：//github.com/previousdeveloper/angular2-simple-countdown