javascript - 方法返回 null

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，这是处理此问题的正确方法。但看看你的返回命令:返回this.img;

它不在 Promise 内部处理，因为它不在任何 .then() 内部因此，您基本上可以调用 getImages() Promise 并跳转到返回命令，而无需等待任何结果。

除此之外，您还在 foreach 内部进行异步调用，这不是异步的。

Here是一个很好的答案，它描述了在异步任务期间应该如何正确使用 Promise。您还绝对应该看看 this了解在使用 Promise 时应如何处理 foreach 和其他循环(位于新手错误 #2 下)。