ngFor is not displaying my Firebase data in my Ionic App


#1

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:
image

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.