ngFor is not displaying my Firebase data in my Ionic App


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-item *ngFor="let subject of subjects" class="myList">

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);

        console.log(this.newsubject.value); = this.newsubject.value; = 4;
        firebase.database().ref('Materias/' + 

    snapshotToArray = snapshot => {
        snapshot.forEach(childSnapshot => {
            let item = childSnapshot.val();
        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.