Question

我已经从firebase存储中获取了图像。但它正在重复循环中的图像。

打字稿

  <div *ngFor="let speaker of speakers; let i = index;" class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="margin-bottom:3rem">
    <div class="card">
      <div class="card-body">
        <img [src]="profileUrl | async"  alt="" class="img-fluid rounded-circle w-50 mb-3">
        <h3>{{speaker.firstName}} {{speaker.lastName}} </h3>
        <h5 class="text-muted">{{speaker.specialization}}</h5>
        <p class="text-justify">{{speaker.bio}}</p>
      </div>
    </div>
  </div>

HTML

{{1}}

如果您有解决方案，请告诉我您的代码。

Answer 1

试试此代码

speakers: Observable<any[]>;

this.speakers = this.speakerService.getSpeakers().map(changes => {
    return changes.map(data => {
        const ref = this.storage.ref(data.profilePath);
        ref.getDownloadURL().subscribe(url=>{
            data.profileUrl = url;
        })
        return data;
    })
});

在html中尝试

 <div *ngFor="let speaker of speakers | async; let i = index;" class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="margin-bottom:3rem">
    <div class="card">
      <div class="card-body">
        <img [src]="speaker.profileUrl"  alt="" class="img-fluid rounded-circle w-50 mb-3">
        <h3>{{speaker.firstName}} {{speaker.lastName}} </h3>
        <h5 class="text-muted">{{speaker.specialization}}</h5>
        <p class="text-justify">{{speaker.bio}}</p>
      </div>
    </div>
  </div>

如何在不重复的情况下显示firebase中的图像

1 个答案: