amTimeAgo與觀察到的 - 不斷刷新每1秒

使用amTimeAgo與觀察到的 - 不斷刷新每1秒

"angular2-moment": "^1.3.3", 
"moment": "^2.18.1",

當我在模板中使用amTimeAgo管：

<div *ngFor="let issue of getIssues() | async "> 
    {{ issue.time | amTimeAgo }} 
    <!--{{ issue.time | amUtc }}--> 
    <!--{{ issue.time | amLocal }}--> 
    <p>{{ issue.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a' }}</p> 
    {{ issue.time }} 
    {{issue | json }} 
</div>

，可觀察：

getIssues(): Observable<any[]> { 

    return Observable.of([ 
    { 
     name: "1", 
     time: new Date(), 
    }, 
    { 
     name: "2", 
     time: new Date(), 
    }, 
    { 
     name: "2", 
     time: new Date(), 
    } 
    ]); 
}

常數被刷新每秒（每次新的新日期（））。

如何預防？

爲什麼每次都得到新數據？

我不希望每次都有新的數據。另外，這將是一個HTTP調用，因此很昂貴。

我想改變偵測觸發過於頻繁......

我檢查其他管道似乎不會引起問題（例如，amDateFormat）

來源

2017-04-22 KarolDepka

'我想改變偵測觸發過於頻繁......'這是正確的。觸發變化檢測週期有很多事情。事實上，你可能會對它觸發的頻率感到非常驚訝。 –

我認爲變化檢測是由'amTimeAgo'管道觸發的。 – KarolDepka

這是非常可能的。我希望你可以配置事件的時間間隔，因爲頻繁的事件可能會影響整個組件的性能。尤其是，如果你的計算量很大的話...... –

爲什麼不上的初始步驟創建瞬間的快照組件生命週期，然後在多個結果中重用它（假設以後沒有代碼會改變日期對象）？

currentDate: Date; 

ngOnInit(): void { 
    this.currentDate = new Date(); 
} 

getIssues(): Observable<any[]> { 
    return Observable.of([ 
    { 
     name: "1", 
     time: this.currentDate, 
    }, 
    { 
     name: "2", 
     time: this.currentDate, 
    }, 
    { 
     name: "2", 
     time: this.currentDate, 
    } 
    ]); 
}

這裏使用ngOnInit代替構造函數很重要。

來源

2017-04-22 05:09:59

您的getIssues()方法會在每次調用時創建一個新的Observable。只要有某種原因讓Angular執行變更檢測，就會調用該方法。您可能有一些觸發變化檢測的事件源（可能是一些計時器或鼠標事件處理程序），以便刷新時間值。您只需使用您發佈的代碼和一個按鈕（以及一個點擊處理程序）即可創建一個簡單的頁面 - 當您單擊該按鈕時，時間將被刷新。

所以唯一需要的是將observable分配給本地屬性。

async管道調用ChangeDetectorRef.markForCheck()它告訴Angular的變化檢測這個組件可能有變化。欲瞭解更多詳情，請參見下面的文章：

來源

2017-04-22 05:26:33

amTimeAgo與觀察到的 - 不斷刷新每1秒

回答

相關問題