角2：IOSが実行中にリストがリフレッシュされない

Question

私はAngular 2プロジェクトで作業します（また、Ionic 2も使用します）。

私のプロジェクトでは、画像リストを表示するページがあります。

ユーザーは写真を追加/削除できます（cordova-cameraプラグインによる）。

私の問題は、ユーザーが画像を削除するときに、UIのリストから削除することです。 クロムでのデバッグ - nice。 IOSでエミュレートしてみてください。またはスマートフォンで実際にテストしてください。ユーザーが画像を削除すると、ボタンが押されるまで表示が更新されません。 どうすればいいですか？ここで

私のコードです：

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スクリプト：

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 1

コール変化検出明示的

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) 
     }); 
    } 
    } 

を使用するか、サービス内に既にあるAngularsゾーンでコールバックがzone.run(...)を使用して実行されていることを確認してください。

pictureServiceの機能は、IOSのzone.jsパッケージで完全にはカバーされていない機能を使用しているようです。