鉴于

2017-01-03 167 views
1

在我的项目“无限滚动日历”离子2 ngFor更新数据我用ngFor到interate超过对象使用“管” mapToIterable。鉴于

不幸的是,我注意到,当我添加新的属性,对象上的视图变量被更新,但不ngFor更新列表。 的事情是,当我进入查看它填补了罚款,但是当我向下滚动它成功地从API获取数据,但不能更新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); 
    }; 
} 

。我想用对象而不是数组?

,因为你使用的是“纯管道”的当值或引用它适用于改变执行我将每一个答案:)

回答

2

这是感激。 它不会检测对象属性changes.In你的情况下,mapToIterable管是不知道的变化存在的对你的对象的属性Check here

尝试

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

谢谢:) 我已经看到了之前,但我没想到它是如此重要:/ 我试图修改代码以使用可观察和解决方案是如此简单... – m1l05z

+1

我经历过同样的事情。发现它很难:) –