Angular2 Ionic2 :: ng用于添加/删除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。我正在修改此承诺回调中的列表。

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()处理程序中添加新人，则它在浏览器和设备中都可以正常工作。