使用Ionic / Angular遍历来自Firebase的逗号分隔图像

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

@Injectable({
  providedIn: 'root'
})
export class ImageService {
  constructor(private db: AngularFireDatabase) { }

  getImages(): Observable<string[]> {
    return this.db.list<string>('images').valueChanges();
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>
      Images
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let imageUrl of imageUrls">
      <img [src]="imageUrl" alt="Image">
    </ion-item>
  </ion-list>
</ion-content>

import { Component } from '@angular/core';
import { ImageService } from '../services/image.service';

@Component({
  selector: 'app-images',
  templateUrl: './images.page.html',
  styleUrls: ['./images.page.scss'],
})
export class ImagesPage {
  imageUrls: string[];

  constructor(private imageService: ImageService) { }

  ionViewDidEnter() {
    this.imageService.getImages().subscribe((imageUrls) => {
      this.imageUrls = imageUrls.flatMap((imageUrl) => imageUrl.split(','));
    });
  }
}