Method returns a null

Question

For some reason my listImage() method returns a null I don't know what I could be doing wrong. for some reason my listImage() method returns null.

import {
  Injectable,
}
from '@angular/core'
declare
var firebase;

@
Injectable()
export class StorageService {

  img:any;

  listImage() {

    var getImages = firebase.database().ref('flats').once('value');
    getImages.then(snapshot => {
      var imgName = snapshot.val();
      var names;

      snapshot.forEach(imgName => {
        names = imgName.val();
        let i = names.image;
        //console.log(i);
        let key = imgName.key
        firebase.storage().ref(i + '.jpg').getDownloadURL().then(url => {
          this.img = url;
        });
      })
    })
    return this.img;
  }

}

could it be the forEach() restricting it

constructor(public navCtrl: NavController, service: StorageService) {
  this.service = service;
  var img = this.service.listImage();
  console.log(img); //this returns null what could be the issue?
}

It's asynchronous method.There are a lot of question related with this problem. I thing it's non angular2 issue — yurzui, Nov 30 '16 at 15:08
oh i see isn't there an angular method or library that can workaround this. — Muzi Jack, Nov 30 '16 at 15:11

score 1 · Answer 1 · edited May 23 '17 at 12:32

The problem is that JS is asynchronous. It has nothing to do with Angular 2 itself.

When you call the listenImage() function you are using a promise which is the correct way to handle this. But look at your return command: return this.img;

It is not handled inside the promise, since it is not inside any .then() So you basically call your getImages() promise and jump to the return command without waiting for any results.

In addition to that, you are making asynchronous calls inside the foreach which is not asynchronous.

Here is a good answer that describes how you should correctly work with promises during asynchronous tasks. And you should also definitely have a look at this to see how you should deal with the foreach and other loops when working with promises (it's under Rookie Mistakes #2).

yeah, read `$q` documentation https://docs.angularjs.org/api/ng/service/$q — jediz, Dec 02 '16 at 20:18

Method returns a null

1 Answers1