如何在角度ngfor中显示来自firebase存储的文件答案

【问题标题】：How do display files from firebase storage in angular ngfor如何在角度ngfor中显示来自firebase存储的文件
【发布时间】：2023-04-10 10:55:01
【问题描述】：

如何在给定模板中的文件路径的情况下显示 Firebase 存储文件。假设我有一个数组中的文件路径。有没有可能做这样的事情：组件类函数

downloadFile(file){ return this.storage.ref(file).downloadURL()}

然后在模板中的一个 ngFor ...

<div *ngFor="let file in files"> <img src="downloadFile(file)"> </div>

我试过了，但我的页面冻结了...

【问题讨论】：

标签： angular firebase firebase-storage

【解决方案1】：

downloadURL 函数返回一个 Observable。所以你不能这样做。

但是你可以创建两个数组。这些 observables 之一，另一个用于实际下载 url。然后，您可以在 downloadURLObservables 数组上应用 forkJoin 运算符来获取实际的下载 url。

这就是它在代码中的样子：

// import forkJoin from here.
import { forkJoin } from 'rxjs/observable/forkJoin';

// declare arrays for storing observables and download url strings;
downloadUrlObservables: Observable<string>[];
downloadUrls: string[];



// map the files to get the download urls in the observable array.
downloadUrlObservables = this.files.map(file => this.storage.ref(file).downloadURL());

// apply a forkJoin to get all the download urls at once.
forkJoin(this.downloadUrlObservables).subscribe(downloadUrls => this.downloadUrls = downloadUrls);

然后您可以像这样在模板中使用 downloadUrls 数组：

<div *ngFor="let downloadUrl in downloadUrls"> <img [src]="downloadUrl | safe: 'url'"> </div>

如果遇到 DOM 清理错误，您可能需要清理图像标签的 src url。

要解决这个问题，您可以创建一个 Angular Pipe 来做这件事。

这是该管道courtesy this medium article 的通用实现：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) { }

  public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }
}

【讨论】：

有什么实现的例子吗？

【解决方案2】：

Firebase 存储在提取数据时以类似的方式工作。虽然有不同的检索方式。最重要的因素之一是如何保存数据。根据它您将能够检索它们。

这里：

storageRef.child("users/me/profile.png").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
    @Override
    public void onSuccess(Uri uri) {
        // Got the download URL for 'users/me/profile.png'
    }
}).addOnFailureListener(new OnFailureListener() {
    @Override
    public void onFailure(@NonNull Exception exception) {
        // Handle any errors
    }
});

// 获取下载地址的另一种方式

storageRef.child("users/me/profile.png").getDownloadUrl().getResult();

孩子的位置非常重要，这应该是您登录的一部分。

例如在新闻结构中，它可以是：

storageRef.child("newsID/articleimage/image.jpg")

newsID - 每篇文章的唯一 ID。重要的！当您创建文章以获得单独的图像时。而且，“image.jpg”可以通过各种方式下载，如下所述：文档。

【讨论】：