Question

我遇到了离子列表的问题，我可以在第一次加载应用时列出所有项目，但是当我对其进行任何更改，添加或删除数据时，列表都不是为用户更新。

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

恢复，数据正在改变，但视图没有反映出来。

视图代码是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);
  }

我相信这应该有效。

离子列表没有刷新模型更改

1 个答案: