倒數對離子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