Firebase 动态存储文件检索

我已成功使用以下内容检索硬编码图像（基本信息来自）：

listings.component.ts

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

@Component({
  selector: 'app-listings',
  templateUrl: './listings.component.html',
  styleUrls: ['./listings.component.css']
})
export class ListingsComponent implements OnInit {
  listings:any;
  image:string;

  constructor(private firebaseService:FirebaseService) {
    let image = firebase.storage().ref().child('myFolder/myImage.jpg').getDownloadURL().then((url) => {
        // Set image url
        this.image = url;
      }).catch((error) => {
        console.log(error);
      });
  }

  ngOnInit() {
    this.firebaseService.getListings().subscribe(listings => {
      console.log(listings);
      this.listings = listings;
    });
  }

}

但是我不知道如何使用类似的方法动态检索图像

<div *ngFor="let listing of listings">
  <img src="{{'myFolder/' + listing.path + '.jpg'}}" />
</div>

---

我想知道您是否可以加入到可观察列表的路径中

因此，在您的服务中：

getListings（）：无法观察{
让results=this.af.database.list（`path/to/data`）
//每次getListings（）发出时，切换到取消订阅/忽略
//任何未决成员查询：
.switchMap（列表=>{
//将列表映射到要创建的可观察对象数组
//当观察值发出值时，更新列表。
让JoinedObservable:any[]=[]
listings.forEach（清单=>{
//列表是否包含要插入路径的字符串？
//如果是的话。。。
joinedObservables.push（firebase.storage（）.ref（）.child（`myFolder/${listing.path}`））.getDownloadURL（）
//我有点不确定这是否可以在这里完成。
。然后（url=>{
listing.imagePath=url
})
.catch（错误=>{
console.log（错误）
})
)
})            
//加入成员Observable并使用结果选择器
//返回已更新的列表。
返回可观察的.CombineTest（joinedObservables，（）=>列表）
})
返回结果
}

组成部分：

ngOnInit（）{
this.listings=this.firebaseService.getListings（）
}

然后在模板中：

<div *ngFor="let listing of listings | async">
    <img [src]="listing.imagePath">
</div>

---

我猜这需要一些调整。或者它可能根本不起作用。如果没有其他的考虑，这可能是一个更适合你的服务的任务。还要记住，您必须导入所使用的运算符；e、 例如，

switchMap

（作为

flatMap

导入）和

combinelatetest

我想知道您是否可以加入可观察列表的路径

因此，在您的服务中：

getListings（）：无法观察{
让results=this.af.database.list（`path/to/data`）
//每次getListings（）发出时，切换到取消订阅/忽略
//任何未决成员查询：
.switchMap（列表=>{
//将列表映射到要创建的可观察对象数组
//当观察值发出值时，更新列表。
让JoinedObservable:any[]=[]
listings.forEach（清单=>{
//列表是否包含要插入路径的字符串？
//如果是的话。。。
joinedObservables.push（firebase.storage（）.ref（）.child（`myFolder/${listing.path}`））.getDownloadURL（）
//我有点不确定这是否可以在这里完成。
。然后（url=>{
listing.imagePath=url
})
.catch（错误=>{
console.log（错误）
})
)
})            
//加入成员Observable并使用结果选择器
//返回已更新的列表。
返回可观察的.CombineTest（joinedObservables，（）=>列表）
})
返回结果
}

组成部分：

ngOnInit（）{
this.listings=this.firebaseService.getListings（）
}

然后在模板中：

<div *ngFor="let listing of listings | async">
    <img [src]="listing.imagePath">
</div>

---

我猜这需要一些调整。或者它可能根本不起作用。如果没有其他的考虑，这可能是一个更适合你的服务的任务。还要记住，您必须导入所使用的运算符；e、 例如，

switchMap

（作为

flatMap

导入）和

combinelatetest

这里只是一个快照，因为我很匆忙，但是插入整个字符串似乎不正确。尝试类似于

[src]=“'myFolder/'+listing.path+'.jpg'”

。请注意，您可以使用方括号绑定到

src

属性，这样就不需要插值。@J.AdamConnor哦，是的，这是AngularJS:D的一个习惯问题是另一个顺便说一句，Firebase需要一个函数来将图像保存到其存储器中，我不知道如何动态请求它们，因为

getDownloadUrl（）

的工作方式（它需要一个路径）。有什么解决办法吗？这里只是一个镜头，因为我很忙，但是插入整个字符串似乎不正确。尝试类似于

[src]=“'myFolder/'+listing.path+'.jpg'”

。请注意，您可以使用方括号绑定到

src

属性，这样就不需要插值。@J.AdamConnor哦，是的，这是AngularJS:D的一个习惯问题是另一个顺便说一句，Firebase需要一个函数来将图像保存到其存储器中，我不知道如何动态请求它们，因为

getDownloadUrl（）

的工作方式（它需要一个路径）。有什么解决方案吗？嗯，我不知道为什么，但在使用该服务时，我遇到了这个错误：

一个声明类型既不是'void'也不是'Any'的函数必须返回一个值。

我从'rxjs'导入了

导入{Observable}

和

switchMap

和

combinelateest

都没有给我错误，我是否遗漏了什么？返回语句位于错误的位置。编辑了答案。再试一次。天哪，真管用。非常感谢！我的URL被破坏了，所以我检查了出了什么问题，我只需将

listingimages/${listing.path}.jpg

更改为

${listing.path}

，一切正常！再次感谢你！很高兴我能帮忙。是的，我不确定image.path是什么样子。嗯，我不知道为什么，但在使用该服务时，我遇到了一个错误：

声明类型既不是'void'也不是'any'的函数必须返回一个值。

我从'rxjs'导入了

导入{Observable}

和

switchMap

和

combinelatetest

都没有给我错误，我是不是错过了