角度2定期的にそうように、私は）moment.js .fromNowを（使用してそれらの相対的な作成日付でアイテムのリストを表示していますビュー

Question

を更新：

getRelativeDate(date: string): string { 
    return moment(date, 'YYYY-MM-DD HH:mm:ss').fromNow(); 
} 

---

<div class="created">{{getRelativeDate(item.created)}}</div> 

そして、ここではそれが見えるものです次のように：

私は項目とやりとりしない限り、データが変更されていないため、現在の時刻は初期ロード後も変わりません。

これらの値を強制的にリフレッシュするにはどうすればよいですか？毎分で十分です。

Answer 1

このためにパイプを作成することについて誰も驚いたことはありませんか？

import { Pipe, PipeTransform } from '@angular/core'; 

import moment from 'moment'; 

@Pipe({ 
    name: 'dateTimeFormat', 
    pure: false, 
}) 
export class DateTimeFormatPipe implements PipeTransform { 
    transform(date: string, format: string = 'YYYY-MM-DD HH:mm:ss'): string { 
    return moment(date, format).fromNow(); 
    } 
} 

これはロジックをパイプにオフロードすることでコンポーネントを清潔に保ちます。

<ul> 
    <li *ngFor="let date of dates"> 
    {{ date | dateTimeFormat:'YYYY-MM-DD HH:mm:ss'}} 
    </li> 
</ul> 

フォーマットはオプションであり、アプリケーション全体で再利用できます。

コンポーネントを定期的に更新するには、setIntervalを更新してください。 ChangeDetectorRefを呼び出し、ChangeDetectionStrategyに基づいてdetectChangesに電話する必要があります。さらに良いことに、コンポーネントは完全にdetachです。モーメントパイプ https://github.com/urish/angular2-moment/

Answer 2

setIntervalに移動してください。

これを行うにはChangeDetectorRefが必要です。

import {OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core'; 

export class Listcomponent implements OnInit, OnDestroy { 

    intervalHolder: any; 

    constructor(private _changeDetectorRef: ChangeDetectorRef) { 
    } 

    ngOnInit(): void { 
    this.intervalHolder = setInterval(() => { 
     // Let's refresh the list. 
     this._changeDetectorRef.markForCheck(); 
    }, 1000 * 60); // 1 minute 
    } 

    ngOnDestroy(): void { 
     clearInterval(this.intervalHolder); 
    } 
} 

Answer 3

あなたのデータはあなたのngOnInit()でsetInterval()を作成し、ngOnDestroy()それをクリアすることができます非同期されていない場合。あなたの作成した日付がキーcreated下itemsという名前の配列に格納されていると仮定すると：

component.ts

myFromNowInterval: any; 
myFromNow = Array(this.items.length).fill(''); 

ngOnInit() { 
    this.myFromNowInterval = setInterval(() => { 
    this.items.forEach((item, index) => this.myFromNow[index] = this.getRelativeDate(item)) 
    }, 60000); 
} 

ngOnDestroy() { 
    clearInterval(this.myFromNowInterval); 
} 

component.html

<div *ngFor="item of items; let i = index;"> 
    <div class="created">{{ myFromNow[i] }}</div> 
</div> 

これはmyFromNow配列毎分更新されます新しい配列のインデックスをDOMに揃えます。

Answer 4

変更検出をトリガーするには、コンポーネントに観測可能な間隔を置くだけで十分だと思います。トリガなしでこの

<span>{{ now() }}</span> 

now() { 
    const now: any = new Date(); 
    return (now - this.start) 
} 

と

triggerCD$; 

ngOnInit() { 
    this.triggerCD$ = Observable.interval(60000) 
} 

テスト、表示は変わりません。
トリガーを使用すると、テンプレート上でnow（）が更新されます（ただし、トリガーへの直接リンクはありません）。