Problem with angular expression Angular2 Ionic2

Question

Problem with angular expression Angular2 Ionic2

Navigation

#1 by (0 votes)

1

Work with both angular2 / 4 and angularjs 1.5. In both, I had no problem running * ngFor (for angular2 / 4) as ng-for (for angularjs 1.5).

However, now working with Ionic 2, when creating a list, with data I got from the database, the data in the 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 fetch the 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 results because the view does not update with the data. Not even the snippet that contains the following {{prayers.length}} code. It remains the value 0 (zero) which is the initial value when the view initializes.

Anyway, I'm looking for the before and after data already sending them to the view to get the result. But I find that very strange. Am I going wrong at some point?

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

I have 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 - > link

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

Thank you in advance!

angular ionic2

asked by anonymous 15.08.2017 / 04:39

1 answer

Spring security set the Token in the Headers How to integrate ASP.NET MVC Core with Vue.js?

score 0 · Answer 1

Try this in the .ts file:

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 [];