在angular component中设置ngx-lightbox时出现问题

Question

嘿，我是angular的新手，我正在构建一个网站，应该在每个组件中都有lightbox图库。我被推荐使用ngx-lightbox来解决我的相册问题。我在让它在实际组件中工作时遇到了问题。

在这里提供的文档中：https://www.npmjs.com/package/ngx-lightbox

我已经完成了将ngx-lightbox导入到我的项目中的步骤，我已经在我的angular.json中声明了它，我已经在appmodule.ts中导入了它，我已经添加了html标记和组件代码。

然而，我现在遇到的问题是我得到了错误，

“src/app/pages/graphic-design/graphic-design.component.ts(11,19)：错误数组中的错误:泛型类型‘TS2314’需要1个类型参数。src/app/pages/graphic-design/graphic-design.component.ts(35,12)：错误TS2551:类型“”GraphicDesignComponent“”上不存在属性“”_albums“”。“”你是说“_相册”吗？src/app/pages/graphic-design/graphic-design.component.ts(41,30)：错误TS2551:类型“”GraphicDesignComponent“”上不存在属性“”_albums“”。“”你是说‘_相册’吗？“

这是我的组件代码(直接从文档中复制。我只添加了两个对象，这两个对象应该是图像，但我无法通过错误来查看它们是否有效。

import { Component, OnInit } from '@angular/core'; 
import { Lightbox } from 'ngx-lightbox';
declare var $:any;

@Component({
  selector: 'app-graphic-design',
  templateUrl: './graphic-design.component.html',
  styleUrls: ['./graphic-design.component.css']
})
export class GraphicDesignComponent{
  private _album: Array = [
    { 
         src: "../assets/images/Roycreates-red.jpg",
         caption: "test",
         thumb: "../assets/images/Roycreates-red.jpg"

    },
    {
      src: "../assets/images/Roycreates-red.jpg",
      caption: "test",
      thumb: "../assets/images/Roycreates-red.jpg"
    }
  ];
  constructor(private _lightbox: Lightbox) {
    for (let i = 1; i <= 4; i++) {
      const src = 'demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,
         caption: caption,
         thumb: thumb
      };

      this._albums.push(album);
    }
  }

  open(index: number): void {
    // open lightbox
    this._lightbox.open(this._albums, index);
  }

  close(): void {
    // close lightbox programmatically
    this._lightbox.close();
  }
}

标记代码与文档中的代码完全相同。我已经在组件代码中列出了我的图像文件源代码。希望我能得到一个清晰的解释，我需要在我的代码中修复什么，以便让它工作。我以前从未使用过ngx组件，而且我对angular也是相当陌生。

下面是供参考的标记代码：

<div *ngFor="let image of _albums; let i=index">
    <img [src]="image.thumb" (click)="open(i)"/>
  </div>

附注:我在一些图库组件上看到了小、中、大文件选项。我上传到画廊的每张照片都需要这样做吗？我不认为ngx-lightbox有这个功能，但是ngx-gallery有，我不确定这是怎么回事。无论如何，我真的希望我能尽快得到这个设置。谢谢你

Answer 1

您已将数组初始化为_album，但将其用作_albums，因此您只需将"s“放在_album的末尾，如下所示：

private _albums: Array = [
{ 
     src: "../assets/images/Roycreates-red.jpg",
     caption: "test",
     thumb: "../assets/images/Roycreates-red.jpg"

},
{
  src: "../assets/images/Roycreates-red.jpg",
  caption: "test",
  thumb: "../assets/images/Roycreates-red.jpg"
}
];

Answer 2

您忘记了给出Array的类型(换句话说，数组所包含的元素的类型是什么)。

更改此行：

 private _album: Array<{src: string, caption: string, thumb: string}> // ...rest of the code

或者，您可以使用不同的语法，如：

private _album: {src: string, caption: string, thumb: string}[] = // ..rest of the code