Question

我的模板：

<ion-item-sliding *ngFor="let draft of drafts">
    <ion-item>
        <h2>Report draft header</h2>
    </ion-item>
    <ion-item-options side="left">
        <button ion-button color="secondary" (click)="draftUpload(draft.report.pk)">
            <ion-icon name="md-cloud-upload"></ion-icon>
            Upload
        </button>
    </ion-item-options>
</ion-item-sliding>

在控制器中，我这样做：

draftUpload(pk) {
    this.dataService.uploadReport(pk);
    this.drafts = this.dataService.getDraftReports();
}

这是getDraftReports（）函数：

getDraftReports() {
    var draftReports = [];
    let reportObj : any;
    this.storage.forEach((value, key, index) => {
        reportObj = JSON.parse(value);

        if(reportObj.report.uploaded=="no"){
            draftReports.push(reportObj);
        }
    });
return draftReports;

}

虽然进行了数据库更改，但这不起作用。如果我刷新页面，或导航并返回，列表会更新。

我做错了什么？

Answer 1

这似乎是一个变化检测问题。每次浏览器事件，超时或http请求都会触发更改检测。

情况是你的函数： getDraftReports（）是异步的，并且没有检测到Angular的回调，因此它不会触发更改检测事件以更新视图。 / p>

为了解决这个问题，您必须将此功能包装到角度区域中。看到这段代码：

导入区域：

import {  NgZone } from '@angular/core';

注入服务ngZone：

constructor(private zone: NgZone) {
    ....
}

最后将此添加到您的函数中：

draftUpload(pk) {
   this.dataService.uploadReport(pk);
   this.zone.run(
    () => {
       this.drafts = this.dataService.getDraftReports();
    }
   )
}

希望这有帮助。

Answer 2

this.storage.foreach返回一个promise，因此是异步的。

您的draftReports数组在设置之前返回。您需要返回承诺：

getDraftReports(draftsHandler:any) {
    //var draftReports = []; 
    //Use a filter method and return the promise.       
    return this.storage.forEach((value, key, index) => {
        let reportObj : any;
        reportObj = JSON.parse(value);
        if(reportObj.report.uploaded=="no"){
            //draftReports.push(reportObj);
             draftsHandler(reportObj);
        }
    });
}

在draftUpload内的drafts集then。

draftUpload(pk) {
    this.dataService.uploadReport(pk);
    this.dataService.getDraftReports((data)=>this.draftsHandler(data)).then(()=>{
       //next steps
    }
}
   draftsHandler(data:any){
     this.drafts.push(data)
   }

Ionic 2 - 列表更新不会反映在UI中，除非刷新页面

2 个答案: