Methode gibt Null zurück

Question

Aus irgendeinem Grund meine listImage() Methode gibt eine Null zurück Ich weiß nicht, was ich falsch machen könnte. Aus irgendeinem Grund gibt meine listImage() Methode null zurück.

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

} 

es die forEach() einzuschränken

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

Das Problem sein könnte, ist, dass JS asynchron ist. Es hat nichts mit Angular 2 selbst zu tun.

Wenn Sie die listenImage() Funktion aufrufen, verwenden Sie ein Versprechen, das die richtige Methode ist, damit umzugehen. Aber schauen Sie auf Ihren Return-Befehl: So rufen Sie im Grunde Ihre getImages() Versprechen und springen auf den Rückkehrbefehl return this.img;

Es ist nicht in der Versprechen gehandhabt wird, da es nicht in jedem .then() ist, ohne irgendwelche Ergebnisse zu warten.

Darüber hinaus führen Sie asynchrone Aufrufe innerhalb der Foreach, die nicht asynchron ist.

Here ist eine gute Antwort, die beschreibt, wie Sie mit Versprechen während asynchronen Aufgaben korrekt arbeiten sollten. Und Sie sollten sich auch unbedingt this ansehen, um zu sehen, wie Sie mit foreach und anderen Schleifen umgehen sollten, wenn Sie mit Versprechen arbeiten (es ist unter Rookie Mistakes # 2).