模型更改后离子列表不刷新

Question

我的 ion-list 有问题，我可以在第一次加载应用程序时列出所有项目，但是当我对其进行任何更改、添加或删除数据时，列表不是为用户更新。

我正在使用 Pouch db 添加和删除应用程序中的持久性数据，所有功能都正常工作，可以通过内容中的 console.log 或使用 fauxton PouchDb 扩展来确认 chrome.

正在恢复，数据正在更改，但视图未反映它。

查看代码是这样notas.html

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let n of notas">
      <ion-item>
        <h2>{{n.descricao}}</h2>
        <p>URL: {{n.endereco}}</p>
        <p>Data de expiração: {{n.vencimento}}</p>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button (click)="editar(n)">
          <ion-icon name="paper"></ion-icon>
          Editar
        </button>
        <button ion-button color="danger" (click)="excluir(n)">
          <ion-icon name="trash"></ion-icon>
          Excluir
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

控制器代码是这样的notas.ts

...
@Component({
  selector: 'page-notas',
  templateUrl: 'notas.html'
})
export class NotasPage {
  notas: any;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public pouchDBService: PouchdbProvider) {
    //PARA USO DO EXTENSION DO CHROME *POUCHDB Fauxton
    (<any>window).PouchDB = PouchDB;
    this.notas = [];
  }

  ionViewDidLoad(){
    this.refresh();
  }

  refresh(){
    //console.log(this.notas);
    this.notas = [];
    this.pouchDBService.getData().then((data) => {
      this.notas = data;
      console.log(this.notas);
    });
    // console.log(this.notas);
  }

  excluir(nota){
    let prompt = this.alertCtrl.create({
      title: 'Excluir',
      message: 'Deseja realmente excluir o registro?',
      buttons: [
        {
          text: 'Cancelar'
        },
        {
          text: 'Excluir',
          handler: data => {
            this.pouchDBService.delete(nota);
            this.notas.pop(nota);
            this.refresh();
          }
        }
      ]
    });

    prompt.present();
  }
}
...

Answer 1

对此不是 100% 确定，但通常如果视图未更新，则与区域上不运行的代码有关，因此：

import { NgZone } from '@angular/core';
...
zone: any = new NgZone({ enableLongStackTrace: false });

然后将刷新方法更改为：

refresh(){
    //console.log(this.notas);
    this.notas = [];
    this.pouchDBService.getData().then((data) => {
      this.zone.run(() => {
        this.notas = data;
        console.log(this.notas);
      });
    });
    // console.log(this.notas);
  }

我相信这应该有效。

模型更改后离子列表不刷新

Ion-list not refreshing afer model change

angularjs

typescript

ionic3