Проблемы с настройкой ngx-лайтбокса в угловом компоненте

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: для универсального типа 'Array' требуются аргументы типа 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>

PS Я видел на некоторых компонентах галереи параметры маленького, среднего и большого файлов.Нужно ли это делать для каждого изображения, которое я загружаю в галерею?Я не думаю, что у ngx-lightbox есть такое, но у ngx-gallery было, и я не был уверен, что это было.В любом случае, очень надеюсь, что скоро смогу получить эту настройку.Thankyou

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

Вы забыли указать тип массива (другими словами, какой будет тип элементов, содержащихся в массиве).

Измените эту строку:

 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