Метод возвращает нуль

Question

По какой-то причине мой метод listImage() возвращает нуль, я не знаю, что я мог делать неправильно. по какой-то причине мой метод 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

Проблема заключается в том, что ИС является асинхронным. Это не имеет никакого отношения к самому Угловому 2.

Когда вы вызываете функцию listenImage(), вы используете обещание, которое является правильным способом справиться с этим. Но посмотрите на вашу команду возврата: return this.img;

Это не обрабатывается внутри обещание, так как это не в любом .then() Таким образом, вы в основном называют свой getImages() обещание и перейти в команду возврата, не дожидаясь каких-либо результатов.

В дополнение к этому вы делаете асинхронные вызовы внутри foreach, который не является асинхронным.

Here - хороший ответ, который описывает, как правильно работать с обещаниями во время асинхронных задач. И вы также должны обязательно взглянуть на this, чтобы увидеть, как вы должны иметь дело с foreach и другими петлями при работе с обещаниями (это под ошибками Rookie # 2).