订阅和模板离子问题

问题描述

我正在尝试显示来自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崩溃了。我不明白为什么循环永远不会结束。

the bug in image

解决方法

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

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（）及其当时存在问题，但我不知道如何解决。