倒数对离子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>

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

我知道这可能通过Observable，但我不知道如何。用整数变量（例如小时= 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你在for循环中，这意味着的setInterval被称为每秒多次。 （至少与数组中的元素一样多）。

也可以定义

let segundos; 
let minutos; 
let hora; 

，但从来没有为它们分配一个值，所以如果您的检查永远是错的。

你也应该避免在计算时间时，你从服务器的响应，而是存储结束时，你从服务器作为一个javascript日期得到。

一旦你有了，你可以在你的setInterval（结束日期 - 当前日期，请确保你只调用它一次）中手动计算差异，并使用自定义角管将秒转换为一个很好的格式，或者使用像这样的npm结节：https://github.com/previousdeveloper/angular2-simple-countdown