Wie kann ich ein Bild aus Firebase Storage anzeigen, ohne das Bild in der Schleife zu wiederholen?

Question

Wie kann ich ein Bild aus Firebase Storage anzeigen, ohne das Bild in der Schleife zu wiederholen? Es ist mir gelungen, die Bilddaten aus dem Speicher zu holen, aber ich kann die Bilder nicht als ein anderes Bild in diesem Array anzeigen. Es gibt nur das gleiche Bild in der Schleife zurück.

HTML

<div *ngFor="let list of listings"class="row"> 
    <img [src]="imageUrl"/> 
</div> 

JavaScript

ngOnInit() { 

    this.listings = []; 
    this.listingss = []; 

    this.firebaseService.getListings().subscribe((data: any) => { 

      data.forEach(listings => { 
       this.listing = listings 
       this.listings.push(listings); 

       //listings logged 
       console.log(listings); 

       // get the reference 
       let storageRef = firebase.storage().ref(); 
       //store the path 
       let spaceRef = storageRef.child(listings.path); 
       //Images logged 
       // console.log('images:', listings.path); 

       //download the url 
       storageRef.child(listings.path).getDownloadURL().then((url) => { 

         //url is our firebase path which we store as a var imageUrl 
         this.imageUrl = url; 

         //push out the listings array of data// 
         // this.listingss.push(listings); 
         console.log(url); 
         console.log("this was a success"); 

Answer 1

Sie sind, dass imageUrl Eigenschaft jedes Mal überschrieben werden.

Sie haben das Bild in Ihr Array-Element zu speichern:

listings.imageUrl = url; 

<div *ngFor="let list of listings"class="row"> 
    <img [src]="list.imageUrl"/> 
</div>