Question

出于某种原因，我的listImage()方法返回null我不知道我可能做错了什么。出于某种原因，我的listImage()方法会返回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;
  }

}

可能是限制它的forEach()

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?
}

Answer 1

问题是JS是异步的。它与Angular 2本身无关。

当您调用listenImage()函数时，您正在使用promise，这是处理此问题的正确方法。但是看看你的返回命令： return this.img;

它不在promise中处理，因为它不在任何.then()内所以你基本上调用你的getImages()承诺并跳转到return命令而不等待任何结果。

除此之外，您在foreach中进行非异步调用。

Here是一个很好的答案，它描述了在异步任务中如何正确使用promises。你还应该看看this，看看在使用promises时你应该如何处理foreach和其他循环（它是在Rookie Mistakes＃2下）。

方法返回null

1 个答案: