0

在我的 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()手动调用该方法以关闭对话框并返回一个在转换完成时解决的承诺。我正在修改此承诺回调中的列表。

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()，它在浏览器和设备中都可以正常工作。

4

0 回答 0