angular - Angular2 Ionic2 :: ngFor 追加/削除 UI 更新の問題

Question

私の Ionic2 (Angular2) アプリケーションには、項目の配列をカプセル化するデータ サービスと、それらの項目を表示するページと、さらに項目を追加できるボタンがあります。

export class Person {
  constructor(private _name: string) { }
  get name(): string { return this._name; }
}

@Injectable()
export class DataService {
  private _persons: Person[] = [new Person('A'), new Person('B')];
  get persons(): Person[] { return this._persons; }
}

@Page({
  template: `
    <ion-list>
      <ion-item *ngFor="let person of dataService.persons">
        {{person.name}}
      </ion-item>
    </ion-list>
    <button (click)="onClickAdd()">Add</button>`,
})
export class MyPage {
  constructor(private dataService: DataService) { }
  onClickAdd() {
    this.dataService.list.push(new Person('New Person'));
  }
}

リストはブラウザで正常にレンダリングされ、リスト操作も正常に機能します。ただし、携帯電話にアプリケーションを展開すると、次の問題に直面し始めます。

リストは正常にレンダリングされますが、リストからアイテムを追加/削除すると、UI が更新されません。他のユーザー アクション (別の場所に移動する、ボタンをクリックするなど) を実行すると、UI が更新され、更新されたリストが表示されます。

ブラウザーでのテスト中にこの問題に直面していないことを繰り返します。これは、Android デバイスにアプリケーションをデプロイした場合にのみ発生します。

なぜこれが起こっているのか途方に暮れており、この問題をトラブルシューティング/解決するために何ができるかについてのアイデアがありません. =(助けてください！

---

編集

さらにテストすると、Ionic2 コンポーネントAlertが原因であることが明らかになりました。より具体的には、私がそれを使用している方法です。このAlertコンポーネントを使用すると、呼び出し元は.dismiss()メソッドを手動で呼び出してダイアログを閉じ、遷移が完了したときに解決される promise を返すことができます。この promise コールバックのリストを変更しています。

onClickAdd() {
  let dialog = Alert.create({
    message: 'Are you sure you want to add a new person?',
    buttons: [{
      text: 'Yes',
      handler: () => {
        dialog.dismiss()
          .then(() => navCtrl.pop)
          .then(() => {
            console.log('UPDATING...');
            this.dataService.list.push(new Person('X'));
          });
      }
    }]
  });
  navCtrl.present(alert);
}

UPDATING...コンソールに出力されていることがわかります。しかし、動作は以前と同じです。UI はブラウザーで更新されますが、デバイスでは更新されません。他の UI アクションが実行されない限り (ボタンをクリックするか、別の場所に移動して戻るなど)。

ロジックを削除してAlert、ハンドラーに新しい人物を追加するだけonClickAdd()で、ブラウザーとデバイスの両方で正常に動作します。