时间戳

首页 > 解决方案 > 如何在 Angular 模态库中获取包含图像的数组

angular - 如何在 Angular 模态库中获取包含图像的数组

问题描述

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

媒体服务.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}`);
  };
}

组件.html

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

组件.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']));
   }
 }

标签： angulartypescriptmodal-dialoggallery

解决方案

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

您应该订阅该服务并将您将从可观察到的图像推送到数组

推荐阅读