角度4視圖不會更新後延遲值

我從離子存儲獲取一些數據並希望在視圖中顯示。問題是，我從存儲中獲取對象，將它們推入數組中，並且想要將它們顯示在視圖中，但由於存儲器延遲1秒，視圖不顯示值。角度4視圖不會更新後延遲值

這裏即時得到的對象和陣列中的推動：

this.tickets$.subscribe(tickets => { 
     this.tickets = tickets.toList() 
     this.tickets.forEach(ticket =>{ 
     let bonusStakeStr = "bonusStake-"+ticket.ticketId; 
     this.storage.get(bonusStakeStr).then(response=> { 
      this.ticketStakes = []; 
      if (response) { 
       let obj = {}; 
       obj[ticket.ticketId] = response ; 
       this.ticketStakes.push(obj); 
      } 
      } 
     ) 

     });

那吸氣劑爲陣列：

getTicketStakesFromStorage(){ 
    return this.ticketStakes; 
    }

這是我的視圖的控制器，I設置數組它在構造：

this.ticketStakes = this.bonusService.getTicketStakesFromStorage();

而得到數組的值用於視圖：

getBonusOdd(ticketId){ 
    if(this.ticketStakes.length<=0)console.log("array is empty") 
    if(this.ticketStakes.length>0)console.log("array is not empty") 
    this.ticketStakes.forEach(ticketStake => { 
     if(ticketStake.hasOwnProperty(ticketId)){ 
     let odd = this.myCurrency(ticketStake[ticketId]); 
     console.log(odd) 
     return odd; 
     } 
    }) 
    }

，並在提出這樣的觀點：

<ion-col width-50 left>{{getBonusOdd(ticket.ticketId)}}</ion-col>

首先是部分"if(this.ticketStakes.length<=0)console.log("array is empty")" 打印出一次，然後"if(this.ticketStakes.length>0)console.log("array is not empty")"打印出來..所以有一個1秒的延遲我承擔，但查看犯規認識到， .. 任何想法將大大appriciated！

來源

2017-09-13 Tolga Tamer

時你訂閱this.tickets $ .subscribe（）...？ – JayDeeEss

在服務的構造函數 –

多數民衆贊成在這個問題上，你正在訪問票數組的價值之前，它從subscribe（）....返回值你可以返回一個observable在你的服務數組的getter（返回這個。 ticketStakes.asObservable（）），然後可以在您的組件中訂閱它或使用異步管道 – JayDeeEss

更新視圖的一種方式（還有其他適用於您實現的邏輯方法）將使用ChangeDetectorRef類的detectChanges()方法。它是從@angular/core這樣進口，

import { ChangeDetectorRef } from '@angular/core';

進樣，由於在這樣的構造參數，

constructor (private ref: ChangeDetectorRef) {}

然後內部的getBonusOdd()方法使用這樣，

getBonusOdd(ticketId){ 
if(this.ticketStakes.length<=0)console.log("array is empty") 
if(this.ticketStakes.length>0) { 
    console.log("array is not empty"); 
    this.ticketStakes.forEach(ticketStake => { 
    if(ticketStake.hasOwnProperty(ticketId)){ 
    let odd = this.myCurrency(ticketStake[ticketId]); 
    console.log(odd); 
    return odd; 
    } 
    }); 
    this.ref.detectChanges(); 
} 
}

來源

2017-09-13 13:32:46 amal

獲得「超出最大調用堆棧大小」的例外 –

好吧，我想我知道發生了什麼。一旦第二個'if'語句變爲'true'（列表'length> 0'），該方法繼續刷新視圖。您的數據是一次性檢索還是必須連續發生？如果你知道數據何時改變（或者你需要應用視圖刷新），那麼將這個條件以及一個&&（和）操作數添加到第二個if語句中，如下所示：if（this。 ticketStakes.length> 0 && ）{}'。這會阻止視圖只在需要刷新的情況下刷新。 – amal

角度4視圖不會更新後延遲值

回答

相關問題