Как добавить изображения в массив галереи Angular? - PullRequest
Новая
       5

Как добавить изображения в массив галереи Angular?

0 голосов
/ 01 марта 2020

У меня есть небольшой проект, встроенный в Angular, и я хотел создать для него галерею.

Я создал компонент галереи и следовал инструкциям на веб-сайте (https://murhafsousli.github.io/ngx-gallery/# / лайтбокс ) о том, как я мог сделать галерею. Я написал код в соответствии с руководством, но теперь я застрял на том, как я могу добавить изображения в массив. У меня есть изображения в папке ресурсов, но я не знаю, как связать их с кодом. Это мой текущий код:

Компонент галереи HTML

    <div class="grid-item"
          *ngFor="let item of items; let i = index"
          [lightbox]="i">
          <img [src]="item.data.thumbnail">
        </div>
Gallery component.ts

    import { Component, OnInit } from '@angular/core';
import { Gallery, GalleryItem } from '@ngx-gallery/core';
import { Url } from 'url';

@Component({
  selector: 'app-gallery',
  styleUrls: ['./gallery.component.css'],
  template: `
    <div class="grid">
      <div
        class="grid-item"
        *ngFor="let item of space$ | async; let i = index"
        [lightbox]="i"
        [gallery]="galleryId"
      >
        <img [src]="item.data.thumbnail" />
      </div>
    </div>
  `
})
export class GalleryComponent implements OnInit {
  galleryId = 'myLightbox';
  items: GalleryItem[];

  constructor(public gallery: Gallery) {}

  ngOnInit(): void {
    // Load items into gallery
    const galleryRef = this.gallery.ref(this.galleryId);
    galleryRef.load(this.items);
  }
}

Как я могу добавить изображения в этот массив для работы галереи?

...