ループ内でイメージを繰り返さずにFirebase Storageからイメージを表示する方法

Question

イメージをループ内で繰り返さずにFirebase Storageからイメージを表示するにはどうすればよいですか？私はストレージから画像データを取り出すことに成功しましたが、画像をその配列内の別の画像として表示することはできません。ループ内で同じ画像が返されます。

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

あなたはそのimageUrlプロパティ毎回上書きされます。

あなたは、配列の要素にその画像を保存する必要があります!!おかげで男を作業

listings.imageUrl = url; 

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