AngularFire2 / Firestore Storage - getDownloadURL() (Ionic)

Question

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

在照片成功上传到Storage后，我设法将URL保存到我的项目中，我以为就是这样，它应该像">[src]="project.picture">那样简单地引用它，但我意识到它没有为我提供Firestore Storage的完整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>

项目列表.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();
}
}

我在这里不知所措——我已经用完了所有的谷歌功夫。请帮帮我！

问候，

Jens

Answer 1

如果查看StorageReference.getDownloadUrl()的定义，您会发现它返回一个promise：

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

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

在AngularFire2(它包装了上面的代码(中，这个承诺被翻译成可观察的下载URL。根据AngularFire文档，这意味着您需要将其作为async绑定到我们的HTML。因此：

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