Problem with angular Expression Angular2 Ionic2

Asked

Viewed 117 times

1

I work with both angular2/4 and Angularjs 1.5. In both I had no problems running *ngFor (for angular2/4) as ng-for (for Angularjs 1.5).

However, working now with Ionic 2, when creating a list, with data q obtained from the database, the data in html is not updated. Below is the template I used.

 {{ 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>

I used the following methods to update search data.

Method 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]);
  }
});

}

Method 2

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

}

Using the two methods above, I did not get a result because the view is not updated with the data. Not even the passage that contains the following code {{ prayers.length }}. The same remains with the value 0 (zero) which is the initial value when the view initializes .

Anyway, I’m searching the data before and after already sending them to the view to get results. But I find this very strange. I’m making a mistake somewhere?

I also noticed that not only *ngFor of this page stopped working, but of others that were already working perfectly.

I installed the following dependencies: 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

Following this tutorial -> https://devdactic.com/ionic-sqlite-queries-database/

This is probably the cause of the problem, but there is some problem already known, with some possible solution?

Thanks in advance!

angular ionic2

1 answer

0

Try so on file . 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)
      );
    }
 }

And so in HTML:

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

IMPORTANT, do not forget to declare the variable like this:

public prayers: any[ ];

Browser other questions tagged angular ionic2

You are not signed in. Login or sign up in order to post.