AngularFire2 / Firestore 存储 - getDownloadURL() (Ionic)

Question

我是一个相当新的 Ionic 开发人员，正在使用 Firestore 构建这个项目列表 Ionic 应用程序，到目前为止一切都很好 - 我现在想在我的项目中添加一张图片。

在将图片成功上传到存储后 - 我设法将 URL 保存到我的项目中，我认为就是这样，它应该可以通过简单地引用它来工作，例如 "[src]="project.图片”，但我开始意识到它没有为我提供 Firestore 存储的完整 URL，显然必须使用方法“getDownloadURL() 接收最后一点“？。

下面的代码是其中一种方法，我试图用它来实现这一点 - 不成功。通过执行前面提到的代码会导致应用程序没有响应，从而导致崩溃并且没有项目图片..

projectlist.html

<ion-card *ngFor="let project of projectsService.projectList | async" (click)="openProject(project)">

                <ion-card-content>
                  <ion-item text-right><h3><b>Status:</b> {{project.status}}</h3></ion-item>
                <ion-item text-left text-wrap>
                    <p><img *ngIf="project.picture"[src]="getProjectPictureByRowId(project)"></p>
                      <h2><b>{{project.name}}</b></h2> 
                      <p>{{project.description}}</p>
                </ion-item>

projectlist.ts

getProjectPictureByRowId(project : Project) {
  project.picture = this.projectsService.getProjectPictureByRowId(project);
}

projects.ts（提供者）

getProjectPictureByRowId(project) {

const ref = this.storage.ref(project.picture);
return project.picture = ref.getDownloadURL().toString();

}

我有一个使用文档 (https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md) 中的以下代码的半工作解决方案，但只有 打开单个项目但不在项目列表中时工作：

@Component({
selector: 'app-root',
template: `<img [src]="profileUrl | async" />`
})
export class AppComponent {
profileUrl: Observable<string | null>;
constructor(private storage: AngularFireStorage) {
 const ref = this.storage.ref(project.picture);
 this.profileUrl = ref.getDownloadURL();
 }
}

我在这里不知所措 - 我已经用完了我所有的 Google-fu。请帮帮我！

问候，

詹斯

Answer 1

如果您查看definition of StorageReference.getDownloadUrl()，您会看到它返回了一个承诺：

getDownloadURL(): Promise<string> { ...

所以调用不会返回 URL 本身，而是最终将解析为该 URL 的承诺。任何需要下载 URL 的代码都需要处理异步加载这一事实。

在 AngularFire2（包装了上面的代码）中，这个 promise 被转换为下载 URL，它是一个 observable。根据AngularFire documentation，这意味着您需要将其绑定到我们的HTML 为async。所以：

<img *ngIf="project.picture" [src]="getProjectPictureByRowId(project) | async"></p>