AngularFire-在模板中显示FireStorage中的图像

Question

我有由Firebase数据库支持的Angular Web应用。数据库中的每个元素代表一个图像数据。除了图像的元数据，元素中的一个关键是图像的FirebaseStorage位置。

需要遍历模板中的图像元素，显示元数据和显示图像。

服务正在负责返回实时数据库数据。然后，组件类的方法负责为FirebaseStorage返回图像URL。这是Angularfire文档，用于检索图像的网址。

需要帮助，通过数据库元素返回的动态数据检索图像的URL。

这是我组件的.ts文件：

import { AngularFireStorage } from '@angular/fire/storage';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  public charts: Observable<any[]>;
  public imgSrc: Observable<string | null>;

  constructor(private DS: DataService, 
    private st: AngularFireStorage) { }

  ngOnInit () {
    this.charts = this.DS.getCharts();
  }

  getImg(imgSrcRaw: string) {
    const ref = this.st.ref(imgSrcRaw);
    this.imgSrc = ref.getDownloadURL();
    return this.imgSrc;
  }
}

data.service.ts：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
    charts: Observable<any[]>;

    constructor(private db: AngularFireDatabase) { 
        this.charts = this.db.list('horizontals_1').valueChanges();
    }

    getCharts() : Observable<any[]> {
        return this.charts;
    }

模板：

<div *ngFor="let chart of charts | async">
    <p>{{ chart.symbol }}/{{ chart.comp_symbol }} </p>
    <img [src]="getImg( chart.img_src )" />
</div>

PS：我对Angular完全陌生，解决方案可能很简单。。

PS2：图像的url也可以直接在Constructor中检索。但是我不知道如何检索Observable数组的一个元素的特定键。

感谢您的帮助！

Answer 1

尝试类似的事情：

<div *ngFor="let chart of charts | async">
    <p>{{ chart.symbol }}/{{ chart.comp_symbol }} </p>
    <img src="{{getImg( chart.img_src )}}" />
</div>

在您的component.ts中：

import { AngularFireStorage } from '@angular/fire/storage';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  public charts: Observable<any[]>;
  public imgSrc: any; // Change imgSrc type

  constructor(private DS: DataService, 
    private st: AngularFireStorage) { }

  ngOnInit () {
    this.charts = this.DS.getCharts();
  }

  getImg(imgSrcRaw: string) {
    let ref = this.st.ref(imgSrcRaw);
    this.imgSrc = ref.getDownloadURL();
    return this.imgSrc;
  }
}