將異步管道與角度模態畫廊一起使用

Question

我正在嘗試使用angular-modal-gallery插件顯示從服務作為json返回的url中的許多圖像。

如果我按照演示進行硬編碼，則模態畫廊效果很好。 但是，當我嘗試掛接服務時，它停止工作。

在我的component.html中，我有；

<ks-modal-gallery [id]="1" [modalImages]="myModalImages | async"></ks-modal-gallery>

然后在component.ts中；

myModalImages: Image[];
myModalImagesSubscription: Subscription;

constructor(private galleryService: GalleryService, private imageService: ImageService) {

    this.myModalImagesSubscription = this.imageService.getModalImages().subscribe((result: Image[]) => {
        this.myModalImages = result;
    });
}

getModalImages()在哪里；

    getModalImages(): Observable<Image[]> {

    return this.http.get(environment.apiUrl + "/image/portfolio/modal/", this.buildRequestOptions())
        .map(res => res.json())
        .catch(this.handleError);
}

現在api被命中，並且Json返回結果。 但是，當我運行SPA時，出現以下錯誤；

錯誤TypeError：無法在ModalGalleryComponent.initImages上讀取null的屬性“長度”

我還嘗試了以下修改，以返回Observable對象；

myModalImages: Observable<Image[]>;


constructor(private galleryService: GalleryService, private imageService: ImageService) {

    this.myModalImages = this.imageService.getModalImages();
}

哪個表明其在獲取圖像之前嘗試進行初始化？

誰能指導我，告訴我我在做什么錯？

最后，我嘗試了如下刪除async管道並初始化數組；

myModalImages: Image[] = [];

myModalImagesSubscription: Subscription;

constructor(private galleryService: GalleryService, private imageService: ImageService) {

    this.myModalImagesSubscription = this.imageService.getModalImages().subscribe((result: Image[]) => {
        this.myModalImages = result;
    });
}

html中包含以下內容；

<ks-modal-gallery [id]="1" [modalImages]="myModalImages"></ks-modal-gallery>

然后出現以下錯誤；

錯誤TypeError：無法讀取CatchSubscriber.BaseService.handleError中未定義的屬性“ get”（作為選擇器）

Answer 1

不要訂閱該服務。 async管道將為您做到這一點。 將返回的observable分配給myModalImages屬性。

constructor(private galleryService: GalleryService, private imageService: ImageService) {

    this.myModalImages= this.imageService.getModalImages() ;
}