Angular：如何使用 *ngFor 在 Firebase 存储中循环图像文件答案

【问题标题】：Angular: How to loop image files in Firebase storage using *ngForAngular：如何使用 *ngFor 在 Firebase 存储中循环图像文件
【发布时间】：2019-01-17 08:43:38
【问题描述】：

我正在构建一个具有图像上传功能的网络应用程序。

我可以成功地将图像上传到名为“uploads”的 Firebase 存储文件夹如何使用 *ngFor 在 HTML 上的“上传”文件夹中显示图像？我正在使用 AngularFire2，Angular 6。

  upload() {
    const file = this.selectedFiles.item(0);
    this.selectedFiles = undefined;

    this.currentFileUpload = new FileUpload(file);
    this.uploadService.pushFileToStorage(this.currentFileUpload, this.progress);
  }


  public saveFileData(fileUpload: FileUpload) {
    this.db.list(`${this.basePath}/`).push(fileUpload);
  }

【问题讨论】：

标签： angular firebase google-cloud-firestore angularfire2 angular6

【解决方案1】：

如果您使用 FileList 对象来保存您的文件，您可以执行类似的操作..

<ul *ngIf="selectedFiles">
    <li *ngFor="let file of selectedFiles">
        <img src="URL.createObjectURL(file)">
    </li>
</ul

我不确定您为什么将 this.selectedFiles var 设置为 undefined，我认为您必须将图像文件放在 component.ts 中的某个位置

使用 FileList obj 或 File[] 从您的数据库中获取您想要显示的图像到您的 component.ts 后，您可以使用上面的代码在您的 component.html 中显示它们。

【讨论】：