У меня проблема с 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();
  }
}
...
0
Gustavo Magalhães 7 Июл 2017 в 22:00

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
Arfons 7 Июл 2017 в 22:12