typescript - Problem med att ställa in ngx-lightbox i Angular-komponent

Hej, jag är ganska ny på Angular och jag bygger en webbplats som ska ha lightbox-gallerier i varje komponent. Jag fick rekommendationen att använda ngx-lightbox för att lösa mitt fotogalleri-problem. Jag har problem med att få det att fungera i själva komponenten.

I dokumentationen som tillhandahålls här: https://www.npmjs.com/package/ngx-lightbox

Jag har slutfört stegen för att importera ngx-lightbox till mitt projekt, jag har deklarerat det i min angular.json, jag har importerat det i appmodule.ts, jag har lagt till HTML-markupen och komponentkoden.

Men problemet jag stöter på nu är att jag får felet,

"FEL i src/app/pages/graphic-design/graphic-design.component.ts(11,19): fel TS2314: Generisk typ 'Array' kräver 1 typargument. src/app/pages/graphic-design/graphic-design.component.ts(35,12): fel TS2551: Egenskapen '_albums' finns inte på typen 'GraphicDesignComponent'. Menade du '_album'? src/app/pages/graphic-design/graphic-design.component.ts(41,30): fel TS2551: Egenskapen '_albums' finns inte på typen 'GraphicDesignComponent'. Menade du '_album'?"

detta är min komponentkod (som är direkt kopierad från dokumentationen. Det enda jag lade till var de två objekten som ska vara bilder, men jag kan inte komma förbi felen för att se om de fungerar.)

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();
  }
}

Markupkoden är bokstavligen exakt samma som i dokumentationen. Jag har listat min bildfilskälla inne i komponentkoden. Hoppas jag kan få en tydlig förklaring på vad jag behöver fixa i min kod för att få detta att fungera. Jag har aldrig använt ngx-komponenter tidigare och jag är ganska ny på Angular.

Här är markeringskoden som referens:

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

P.S. Jag har sett i några gallerikomponenter alternativen för liten, medium, stor fil. Behöver jag göra detta för varje bild jag laddar upp till galleriet? Jag tror inte att ngx-lightbox har det, men ngx-gallery hade det och jag var inte säker på vad det handlade om. Hur som helst, jag hoppas verkligen att jag kan få detta uppsatt snart. Tack

Svar #1

Du har initierat arrayen som _album men använder den som _albums, så du behöver bara lägga till ett "s" i slutet av _album på det här sättet:

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

Svar #2

Du glömde att ange typ av array (med andra ord - vilken typ av element som kommer att innehållas av arrayen).

Ändra denna rad:

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

Eller så kan du använda en annan syntax som:

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