1

Trabalho tanto com angular2/4 como angularjs 1.5. Em ambos não tive problemas ao executar o *ngFor (para angular2/4) como o ng-for (para o angularjs 1.5).

No entanto, trabalhando agora com o Ionic 2, ao criar uma lista, com dados q obtive do banco, os dados no html não são atualizados. Segue abaixo o template que usei.

 {{ prayers.length }}
  <ion-list *ngIf="prayers.length > 0">
    <ion-item *ngFor="let prayer of prayers">
      <h3>{{ prayer.title }}</h3>
      <p>{{ prayer.body }}</p>
    </ion-item>
  </ion-list>

Usei os seguintes métodos para atualizar buscar os dados.

Método 1

ngOnInit(): void {
console.log('ngOnInit Prayers');
this._dataBaseProvider.getAllPrayers()
.then( list => {
  for(let i=0; i < list.length; i++){
    console.log('item '+(i+1)+'  da lista',list[i]);
    this.prayers.push(list[i]);
  }
});

}

Método 2

ngOnInit(): void {
console.log('ngOnInit Prayers');
this._dataBaseProvider.getAllPrayers()
.then( list => {
  this.prayers = list;
  console.log('orações: ',this.prayers);
});

}

Utilizando os dois métodos acima, não obtive resultado pois a view não se atualiza com os dados. Nem mesmo o trecho que contém o seguinte código {{ prayers.length }}. O mesmo permanece com o valor 0 (zero) que é o valor inicial quando a view inicializa .

Enfim, estou buscando os dados antes e depois já enviando os para a view para obter resultado. Mas acho isso muito estranho. Estou errando em algum ponto?

Notei também que não só o *ngFor desta página parou de funcionar, mas de outras que já estavam funcionando perfeitamente.

Instalei as seguintes dependências: ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter ionic cordova plugin add cordova-sqlite-storage npm install --save @ionic-native/sqlite-porter @ionic-native/sqlite

Seguindo este tutorial -> https://devdactic.com/ionic-sqlite-queries-database/

Provavelmente esta seja a causa do problema, mas existe algum problema já conhecido, com alguma possível solução?

Desde já agradeço!

1 Resposta 1

0

Tente assim no arquivo .ts:

export class SuaPage{

   public prayers: any[];

   ionViewDidLoad(){
      this.getPlayers();
   }

   getPlayers(){
   this._dataBaseProvider.getAllPrayers()
     .subscribe(
             data=> JSON.stringify(this.prayers = data),
             err=> console.log("erro: " + err)
      );
    }
 }

E assim no HTML:

<ion-list *ngFor="let prayer of prayers">
   <h3>{{ prayer.title }}</h3>
   <p>{{ prayer.body }}</p>
</ion-list>

IMPORTANTE, não esqueça de declarar a variável assim:

public prayers: any[ ];

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .