angular 2:如何使用来自firebase存储的* ngFor迭代图像

时间:2017-04-10 22:02:01

标签: angular firebase firebase-realtime-database angularfire

我正在尝试迭代存储在Firebase存储中的图像。我已成功将包含相关元数据的图片上传到Firebase。但是,我无法从存储中获取图像。对于单个图像,它工作得很好。但是,我无法在多个商家信息页面上获取多个图片

请检查我的代码并很好地给我你的答案。

  

控制台中抛出的异常错误 - > EXCEPTION:Firebase存储:索引0处的子节点中的参数无效:预期字符串。

import { Component, OnInit } from '@angular/core'; 
import {ProgramFirebaseService} from '../../services/programfirebase.service';
import * as firebase from 'firebase';

@Component({
selector: 'app-program-listings',
 templateUrl: './program-listings.component.html',
  styleUrls: ['./program-listings.component.css']
})
export class ProgramListingsComponent implements OnInit {
listings : any;
image: any;
  constructor(private service: ProgramFirebaseService) { }

  ngOnInit() {
    //this.listings =[];
    //this.image =[];
    this.service.getListings().subscribe((listings:any)=>{

      console.log(listings);
      this.listings = listings;
     // get reference from storage
     let storageRef = firebase.storage().ref();
     let spaceRef = storageRef.child(listings.path);
     // download the url
      storageRef.child(listings.path).getDownloadURL().then((url)=>{
      // url is firebase path which we store as a var imageUrl
      listings.image = url;
      console.log("this is ok");
      });


    });




  }

}






The html potion related to is along with above ts file. 
<div *ngFor="let lst of listings"> <img sytle="width:50%" src=lst.image>

0 个答案:

没有答案