配列内の最初の要素への角度変化が検出されない

Question

現在の日付のリストをAngularアプリに表示しようとしています。ユーザーがボタンをクリックするだけで前の週を表示できるようにするため、Observableを使用して日付の配列を更新し、更新された配列を表示しようとしています。

すべてのアイテムは、アレイ内の最初のアイテムを除き、ビューで更新されます。 Plunker example here

私は* ngForと非同期パイプを使用してみましたが、配列内の各項目の要素を明示的に作成しようとしました（下記参照）。両方とも同じ問題があります。私は解決策を見つけるのに苦労している。

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button (click)="previousWeek()">Prev Week</button> 
    <div>{{dates[0]}}</div> 
    <div>{{dates[1]}}</div> 
    <div>{{dates[2]}}</div> 
    `, 
}) 
export class App { 
    name:string; 
    dates: Date[]; 
    public $datesSource: Observable<Date[]>; 
    private datesSource: Subject<Date[]>; 

    constructor() { 
    this.datesSource = new Subject<Date[]>(); 
    this.datesSource$ = this.getDatesWithObservable(); 
    this.datesSource$.subscribe((dates) => { 
     console.log(dates); 

     this.dates = dates; 
    }) 

    this.setDates(new Date()); 
    } 

    setMonday(date: Date): Date { 
     const day = date.getDay() || 7; 
     if (day !== 1) { 
      date.setHours(-24 * (day - 1)); 
     } 
     return date; 
    } 

    setDates(date: Date): void { 
     const dates = [ 
      new Date(), 
      new Date(), 
      new Date(), 
      new Date(), 
      new Date(), 
      new Date(), 
      new Date() 
     ]; 
     const monday = this.setMonday(date); 
     dates[0] = monday; 
     const mondayDate = monday.getTime(); 
     dates.forEach((date, idx) => { 
      console.log(idx); 

      date.setTime(monday.getTime() + (idx * 24 * 60 * 60 * 1000)); 
    }); 
     this.addDates(dates); 
    } 

    addDates(dates: Date[]): void { 
     this.datesSource.next(dates); 
    } 

    getDatesWithObservable(): Observable<Date[]> { 
     return this.datesSource.asObservable(); 
    } 


    previousWeek(): void { 
     const day = this.dates[0].getDay() || 7; 
     const lastWeek = this.dates[0]; 
     const days = 7; 
     lastWeek.setTime(lastWeek.getTime() - (days * 24 * 60 * 60 * 1000)); 
     this.setDates(lastWeek); 
    } 
} 

Answer 1

これを試してみてください、私は途中で行をコメントし、それが働いている、あなたが確認できます。

 const monday = this.setMonday(date); 
    //dates[0] = monday; 
    const mondayDate = monday.getTime();