Question

我正在尝试使用angular-modal-gallery插件来显示从服务返回的json中的大量图像。

如果我按照演示进行硬编码，则模态画廊效果很好。但是，当我尝试连接我的服务时，它将停止工作。

在我的component.html中；

<ks-modal-gallery [id]="1" [modalImages]="myModalImages"></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;
    });
}

上面的代码在运行时不会引发任何错误，但是当我加载模态画廊时，它会引发错误；

错误TypeError：无法读取未定义的属性'img' 在Object.eval [作为updateRenderer]（CurrentImageComponent.html：60）

现在似乎可以确认该数组已被覆盖（因为它显示了api返回的图像数（8）），但是它并未通过外观映射img字段

返回json是（从console.log中获取）；

(8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image1.jpg", description: "...."}
1
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image2.jpg", description: "...."}
2
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image3.jpg", description: "...."}
3
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image4.jpg", description: "...."}
4
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image5.jpg", description: "...."}
5
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image6.jpg", description: "...."}
6
:
{id: 0, img: "http://localhost:50143/images/portfolio/modal/image7.jpg", description: "...."}
7
:
{id: 0, img: "http://localhost:50143/images/portfolio/theburlington/modal/image8.jpg", description: "...."}
length
:
8

有人可以建议我如何解决此问题吗？

img字段未从带有angular-modal-gallery

0 个答案: