angular - 无法在 Angular 组件中设置 ngx-lightbox

Question

嘿，我是 Angular 的新手，我正在构建一个应该在每个组件中都有灯箱画廊的网站。我被推荐 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:属性“_albums”在类型“GraphicDesignComponent”上不存在。您指的是 '_album' 吗?src/app/pages/graphic-design/graphic-design.component.ts(41,30):错误 TS2551:属性“_albums”在类型“GraphicDesignComponent”上不存在。你是说‘_album’吗？”

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

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，因此您只需要像这样在 _album 的末尾放置“s”:

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"
}
];