訪問數組Angular2中的對象

Question

我嘗試訪問數組內的對象時遇到問題。 這是我的代碼：

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

我的控制台日志顯示了此信息，但我無法訪問this.imageUrls [0]：

我想訪問this.imageUrls [0]並獲取url，但說“未定義”，我不知道為什么我不能這樣做。 如果有人可以幫助我，請把我堆在這里。

編輯13/06/2017

在@JesúsPallares的幫助下，現在始終顯示相同的圖像。 現在，我要為每個列表圖像。 我在這里粘貼我的前端代碼：

  <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

您必須使“ getImagUrl”功能同步。 例如，您可以通過使用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;
}

一個圖片標簽：

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

使用ngFor：

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

ngOnInit更新：

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代碼：

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