Ionic 2 ngForビューの更新データ

Question

私のプロジェクトでは'無限スクロールカレンダー'私はngForを使って 'pipe' mapToIterableを使ってオブジェクトを介在させます。

残念ながら、ビュー変数上のオブジェクトに新しいプロパティを追加すると通知されますが、変数は更新されますが、リストは更新されません。 私はビューに入るときにうまくいっているが、下にスクロールすると正常にデータを取得するが、ngForでリストを更新しない。

zone.run()にコードを挿入することで問題を解決しようとした。いくつかのコードのための

#ionic info 

Your system information: 

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3 
Ionic CLI Version: 2.1.18 
Ionic App Lib Version: 2.1.9 
Ionic App Scripts Version: 0.0.45 
ios-deploy version: Not installed 
ios-sim version: Not installed 
OS: Linux 4.4 
Node Version: v6.5.0 
Xcode version: Not installed 

時間：

// mapToIterable.pipe.ts 
import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'mapToIterable'}) 
export class MapToIterablePipe implements PipeTransform { 
    transform(value): any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({ key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

。

// index.ts 
export class Appointments { 
    appointments = {}; 
    current_date = new Date(); 
    top_date: any = new Date(+new Date - 12096e5); // 14 days past 
    bottom_date: any = new Date(+new Date + 12096e5); // 14 day future 
    range = { 
    start_date: this.top_date, 
    end_date: this.bottom_date 
    } 

    generateDays = function (start, end) { 
    while(start < end) { 
     start.setDate(start.getDate() + 1); 
     this.appointments[start.toISOString().slice(0, 10)] = []; 
    } 
    }; 

    fillDays = function() { 
    this.appointmentService.all(this.range).map(res => res.json()).subscribe(
     data => { 
     for (var appointment in data) { 
      this.appointments[appointment] = data[appointment]; 
     } 
     }, 
     err => { 
     console.log(JSON.parse(err._body)); 
     } 
    ); 
    }; 

    constructor(
    public navCtrl: Nav, 
    public appointmentService: AppointmentService, 
) { 
    var temp_date: any = new Date(this.top_date); 
    this.generateDays(temp_date, this.bottom_date); 
    this.fillDays(); 
    } 

    moreFuture(infiniteScroll) { 
    setTimeout(() => { 
     var temp_date: any = new Date(this.bottom_date); 
     this.bottom_date = new Date(+temp_date + 12096e5); // add 14 days 
     this.range.start_date = temp_date; 
     this.range.end_date = this.bottom_date; 
     this.generateDays(temp_date, this.bottom_date); 
     this.fillDays(); 
     infiniteScroll.complete(); 
    }, 500); 
    }; 
} 

。

// index.html 
<ion-content padding> 
    {{appointments | json}} 
    <ion-list class="calendar-list"> 
    <div *ngFor="let appointment of appointments | mapToIterable" [id]="appointment.key"> 
     <ion-item class="day past"> 
     <ion-avatar class="date" item-left> 
      <h1>{{appointment.key | date: 'dd'}}</h1> 
      <h2>{{appointment.key | date: 'MMM'}}</h2> 
     </ion-avatar> 
     <div *ngIf="!!appointments[appointment.key].length"> 
      <ion-avatar class="inline" text-center padding> 
      {{appointments[appointment.key][0].patient.first_name[0]}}{{appointments[appointment.key][0].patient.last_name[0]}} 
      </ion-avatar> 
      <div class="inline"> 
      <h2 class="username" text-wrap> 
       {{appointments[appointment.key][0].patient.first_name}} 
       {{appointments[appointment.key][0].patient.last_name}} 
      </h2> 
      <p> 
       <ion-icon name="clock-gray"></ion-icon> 
       {{appointments[appointment.key][0].time_start | date: 'HH:mm'}} 
       - 
       {{appointments[appointment.key][0].time_end | date: 'HH:mm'}} 
      </p> 
      </div> 
     </div> 
     </ion-item> 
    </div> 
    <ion-infinite-scroll (ionInfinite)="moreFuture($event)"> 
     <ion-infinite-scroll-content></ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </ion-list> 
</ion-content> 

なぜなら、私は配列ではなくオブジェクトを使用しているからですか？

私はすべての答えのために感謝するでしょう:)

Answer 1

あなたが値や参照がそれが変更に適用されたときに実行する「純粋パイプ」を使用しているためです。 それはあなたのケースをchanges.Inオブジェクトのプロパティを検出しない、mapToIterableパイプはCheck here

は試してみてください、あなたのオブジェクトのプロパティにoccuring変化を認識していない

@Pipe({name: 'mapToIterable',pure:false})