订阅和模板离子的问题

Question

我正在尝试显示来自firebase存储的图像，如下所示：

在我的组件中：

findImg(img) {
this.storage.ref('/img/' + img).getDownloadURL().subscribe(
result => {
console.log(result);
}
)

在我的模板中：

<ion-header>
<ion-toolbar>
<ion-title>La gamme : {{collectionName}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card *ngFor="let pro of product | async">
<ion-card-header>
<ion-card-title>{{pro.name}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>{{pro.img}}</p>
<div *ngIf="findImg(pro.img)"></div>
</ion-card-content>
</ion-card>
</ion-content>

pro.img是字段的名称"；img"；在我的数据库中我的产品和他的照片的名称也在存储中。

除了带有ngIf的div之外，其他一切都可以工作。在控制台中，结果很好，但显示无限，Chrome崩溃。我不明白为什么循环永远不会结束。

图像中的错误

Answer 1

我尝试了另一种解决方案，获取图像的名称和url，并将其发送到数组中：

tab: Array<any> = [[], []];
async getImage() {
return this.storage.ref('img').listAll().subscribe( result => {
result.items.forEach(imageRef => {
this.image = imageRef.name;
this.refImage = imageRef.getDownloadURL().then( url => {
console.log('My URL : ' + url);
return this.url = url;
});
this.tab.push([this.image, this.url]);
});
console.log(this.tab);
});
}

第一个console.log有效，但最后一个无效。this.tab的第一个值出现，但第二个值未定义。我想我对getDownloadUrl((和他的有问题，但我不知道如何修复它。