Access objects inside array Angular2

Question

i have a problem when I try to access to objects inside array. Here is my code:

import { Component, OnInit } from '@angular/core';
import {FirebaseService} from '../../services/firebase.service';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import {Router, ActivatedRoute, Params} from '@angular/router';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  listings:any;
  search:any;
  imageUrls: any = [];
  images:any;
  myimage:any;
  count:any;
  constructor(
    private firebaseService: FirebaseService,
    private router:Router,
    public af:AngularFire,
    private route:ActivatedRoute,    
    private flashMessage:FlashMessagesService) {

    this.firebaseService.getListings().subscribe(listings => {
      this.listings = listings;
      this.count = listings.length;
    });  
  }
  ngOnInit() {   

    this.firebaseService.getListings().subscribe(listings => { 


      this.listings = listings;
      for(var i = 0;i<this.listings.length;i++){
        this.getImageUrl(listings[i].$key);
      }

      console.log(this.imageUrls);
      console.log(this.imageUrls[1].ImageUrl);
    });  
  }
  searchProps(){    
    this.firebaseService.getListingsByTitle(this.search.toLowerCase()).subscribe(listings => { 
      this.listings = listings;
    });
  }

  getImageUrl(prodid){
    this.imageUrls = []; 
    this.firebaseService.getListingImages(prodid).subscribe(images => { 
      this.images = images[0];
      let image = images[0];
      let storageRef = firebase.storage().ref();
      let spaceRef = storageRef.child(image.path);
      storageRef.child(image.path).getDownloadURL().then((url) => {
        // Set image url
        this.imageUrls.push(new ImageUrl(image.$key,url));        
      }).catch((error) => {
        console.log(error);
      });        
      });
  }

}
export class ImageUrl {
  url: string;
  id:string;
  constructor(_id:string,_url: string) {
     this.url = _url
     this.id = _id;
  }
}

My console log is showing this but i can't access to this.imageUrls[0]:

I want to access to this.imageUrls[0] and get the url but says "undefined" I don't know why I can't do that. Please if someone can help me with this I am so stacked here.

EDIT 13/06/2017

With the help from @JesúsPallares now is showing always the same image. Now I want for each listing the image. I paste here my front end code:

  <div class="col-md-4" *ngFor="let listing of listings | orderby:'!$key'" > <div class="card"> <div class="card-image"> <img class="img-responsive" [src]="imgSelected"> <span class="card-title">{{listing.title}}</span> </div> <div class="card-content"> <p>Cards for display in portfolio style material design by Google.</p> </div> <div class="card-action"> <a [routerLink]="['/listing/'+listing.$key]">+ Info</a> <a [routerLink]="['/listing/'+listing.$key]">Contacto</a> </div> </div> </div> 

Answer 1

You must make the 'getImagUrl' function synchronous. For example, you can do this by using Subject:

import {Subject} from 'rxjs';

imgSelected: any;

ngOnInit() {   
    this.firebaseService.getListings().subscribe(listings => { 
      this.listings = listings;
      for(var i = 0;i<this.listings.length;i++){
        this.getImageUrl(listings[i].$key).subscribe(isObtained => {
          if (isObtained) {
            this.imgSelected = this.imageUrls[0].url;
          }
        });
      }
    });
 }

getImageUrl(prodid): Subject<boolean> {
    let subject: Subject<boolean> = new Subject<boolean>();
    this.imageUrls = []; 
    this.firebaseService.getListingImages(prodid).subscribe(images => { 
      this.images = images[0];
      let image = images[0];
      let storageRef = firebase.storage().ref();
      let spaceRef = storageRef.child(image.path);
      storageRef.child(image.path).getDownloadURL().then((url) => {
        // Set image url
        this.imageUrls.push(new ImageUrl(image.$key,url));
        subject.next(true);
        subject.complete();
      }).catch((error) => {
        subject.next(false);
        subject.complete();
        console.log(error);
      });        
    });
    return subject;
}

One image label:

<img class="img-responsive" [src]="imgSelected">

Using ngFor:

<img *ngFor="let img of imageUrls" class="img-responsive" [src]="img.url">

ngOnInit update:

ngOnInit() {
    this.firebaseService.getListings().subscribe(listings => {
      let listingsLength = listings.length;
      let count: number = 0;
      let subject: Subject<any> = new Subject<any>();
      subject.subscribe(finish => {
        listings.forEach(list => {
          list.url = this.imageUrls.find(img => img.id === list.$key).url;
        });
        this.listings = listings;
      });
      for (let i = 0; i < listingsLength; i++) {
        count++;
        this.getImageUrl(listings[i].$key).subscribe(isObtained => {
          if (count === listingsLength) {
            subject.next('complete');
            subject.complete();
          }
        });
      }
    });
 }

HTML Code:

 <div class="col-md-4" *ngFor="let listing of listings | orderby:'!$key'" > <div class="card"> <div class="card-image"> <img class="img-responsive" [src]="listing.url"> <span class="card-title">{{listing.title}}</span> </div> <div class="card-content"> <p>Cards for display in portfolio style material design by Google.</p> </div> <div class="card-action"> <a [routerLink]="['/listing/'+listing.$key]">+ Info</a> <a [routerLink]="['/listing/'+listing.$key]">Contacto</a> </div> </div> </div>