Javascript AngularFire2/Firestore存储-getDownloadURL（）（离子型）

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

在成功地将图片上传到存储器后，我设法将URL保存到我的项目中，我认为这就是它，它应该通过简单地引用它来工作，如“[src]=”project.picture“，但我意识到它没有为我提供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>

projects.ts（提供商）

我有一个半工作的解决方案，使用docs（）中的以下代码，但仅 打开单个项目但不在项目列表中时工作：

@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();
 }
}

@组件({
选择器：'应用程序根'，
模板：``
})
导出类AppComponent{
profileUrl：可观察的；
构造函数（专用存储：AngularFireStorage）{
const ref=this.storage.ref（项目图片）；
this.profileUrl=ref.getDownloadURL（）；
}
}

我在这里不知所措——我已经用光了所有的谷歌浏览器。请帮帮我

问候,

Jens

如果您查看，您将看到它返回了一个承诺：

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

---

首先-感谢您的快速回复-非常感谢，弗兰克！-）。实际上，我已经尝试过上面的方法，使用管道异步，但遗憾的是，它仍然导致应用程序没有响应，最终导致会话超时。我不确定——我真的可以通过将可观测值传递给字符串来执行上述操作吗？或者，正如上面文档中的示例所示，它确实是必要的——以与字符串相反的可观察形式返回结果？我怎样才能最好地做到这一点谢谢。您正在使用AngularFire的

ref.getDownloadURL（）

不是吗？它已经返回了一个可观察的。我只是不确定Angular是否能够解析方法调用（我远不是Angular方面的专家）。我也是。谢谢你的帮助！希望某个角度的专家会出现，也许：-）。

@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();
 }
}

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

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