メソッドは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; 
    } 

} 

はそれはそれは

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

問題制限forEach()可能性がJSが非同期であるということです。 Angular 2自体とは何の関係もありません。

listenImage()関数を呼び出すと、これを処理する正しい方法である約束を使用しています。それはどんな.then() 内ですから、基本的にあなたのgetImages()約束を呼び出し、任意の結果を待たずにリターン命令にジャンプしないので、それは約束の内部で処理されない return this.img;

： しかし、あなたのリターンコマンドを見てください。

さらに、foreach内では非同期ではない非同期呼び出しを行っています。

Hereは、非同期タスク中に約束事をどのように正しく機能させるべきかを説明する良い答えです。 また、約束事で作業するときにforeachやその他のループをどう扱うべきかを見るには、thisを見てください（Rookie Mistakes＃2の下にあります）。