时间戳

首页 > 解决方案 > 如何在角度 ngfor 中显示来自 Firebase 存储的文件

angular - 如何在角度 ngfor 中显示来自 Firebase 存储的文件

问题描述

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

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

然后在模板中的 ngFor ...

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

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

标签： angularfirebasefirebase-storage

解决方案

该downloadURL函数返回一个 Observable。因此，您将无法这样做。

但是您可以创建两个数组。这些 observables 之一，另一个用于实际下载 url。然后，您可以forkJoin在 downloadURLObservables 数组上应用运算符来获取实际的下载 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 来做这件事。

这是该管道的通用实现，由这篇中型文章提供：

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

推荐阅读