如何在Angular Modal Gallery中获取带有图像的数组

Question

我正在尝试使用'angular-modal-gallery'在角应用程序中制作图库。问题是我不知道如何将observable（带图像数据）从媒体服务转换为数组。 Angular-modal-gallery文档说我需要用我的图像初始化数组。

media.service.ts

export class MediaService {

  API_URL = AppConfig.settings.api.url;
  constructor(private http: HttpClient) { }

  getAlbum = (id: string) => {
    return this.http.get(`${this.API_URL}/album?id=${id}`);
  };
}

component.html

<modal-gallery [modalImages]="imagesArraySubscribed"></modal-gallery>

component.ts

export class PhotoComponent implements OnInit {

  imagesArraySubscribed: Array<Image>;
  private subscription: Subscription;

  private album_id = '12121564564564';
  private album$: Observable<any>;

  constructor( private mediaService: MediaService ) { }

  ngOnInit() {

  this.album$ = this.mediaService.getAlbum(this.album_id).pipe(map(res => 
  res['photoset']['photo']));
   }
 }

Answer 1

this.mediaService.getAlbum(this.album_id).pipe(map(res => 
   res['photoset']['photo'])).subscribe(res => {
      imagesArraySubscribed.push(res)});

您应该订阅该服务并将您将从observable获取的图像推送到数组

Answer 2

您必须订阅getAlbum方法，您才会收到数据。

this.album$ = this.mediaService.getAlbum(this.album_id).suscribe( (res:any[]) => {
    this.imagesArraySubscribed = res['photoset']['photo']; 
}