I just started with Ionic and I have a problem, I’ve been reading rigth here and in another forums but i can get the job done.
My problem is that I get data from Firebase and I assing that data to an array, then i want to display that data in my UI but it just show empty items, each item should have a string with a name of a subject, but it’s not displaying anything. Here are some sceenshots:
My items in the firebase database:
The result on ionic lab:
In order to identify the empty items I set a red border to them.
My html code is this:
<ion-content padding>
<ion-list>
<ion-item *ngFor="let subject of subjects" class="myList">
{{subject.name}}
</ion-item>
</ion-list>
</ion-content>
and my code in my Typescript file is this one:
export class HomePage {
subjects = [];
returnArr = [];
new_subject:any = {};
@ViewChild('newsubject') newsubject;
ref = firebase.database().ref('Materias');
constructor(public navCtrl: NavController) {
this.ref.on('value', resp => {
this.subjects = [];
this.subjects = this.snapshotToArray(resp);
});
}
insertData(){
console.log(this.newsubject.value);
this.new_subject.name = this.newsubject.value;
this.new_subject.id = 4;
firebase.database().ref('Materias/' +
this.newsubject.value).set(this.new_subject);
}
snapshotToArray = snapshot => {
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.name = childSnapshot.name;
item.id = childSnapshot.id;
this.returnArr.push(item);
});
return this.returnArr;
};
}
I don’t know whats wrong, I’ve been trying a lot of solutions but none of them works, I implement a function to log in the console the subject array but it returns empty objects, any help would be appreciated, thanks for your time.