user2783091 user2783091 - 1 month ago 15
iOS Question

Angular 2 : list is not refresh on running IOS

I work in Angular 2 project (and also use Ionic 2).

In my project, I have a page to display pictures-list.

User can add/remove pictures (by cordova-camera plugin).

My problem is: when user remove picture, I remove it from list behind UI.
Debugging at chrome - work nice.
BUT, try emulate on IOS, or really test on Smart-phone
, when user delete picture the view is doesn't get refresh till he press any button.
What should I do???

Here is my code:

HTML:

<ion-list>
<ion-col width-50 *ngFor="let picture of pictures">
<div>
<button (click)="checkAsGood(picture)">I like</button>
<button (click)="deletePicture(picture)"><ion-icon name="trash"></ion-icon></button>
</div>
<div>
<img [src]="picture.src" />
</div>
</ion-col>
</ion-list>


Java Script:

private deletePicture(pictureRecord:Picture) {
var self = this;
self.pictureService.deleteUserPicture(pictureRecord).then(function deleteSucceeded() {

self.pictures.splice(self.pictures.indexOf(pictureRecord), 1);
}, function deleteFaild(error) {
self.messagesService.showToastMessage(error.code)
});
}

Answer

Call change detection explicitly

  class MyComponent {

    constructor(private cdRef:ChangeDetectorRef) {}

    private deletePicture(pictureRecord:Picture) {
      this.pictureService.deleteUserPicture(pictureRecord).then(() => {
        this.pictures.splice(this.pictures.indexOf(pictureRecord), 1);
        this.cdRef.detectChanges();
      }, (error) => {
        this.messagesService.showToastMessage(error.code)
      });
    }
  }

or ensure the callback is executed in Angulars zone already in the service using zone.run(...).

It looks like some functionality your pictureService is using functionality that isn't fully covered by the zone.js package on IOS.