Always in the gallery the last post after the loop in html | Angular 8 | @ngx-gallery/core

There is a list of posts that are successfully loaded from the database when the page loads. Each post has its own array of photos. I use libu @ngx-gallery / core for the gallery. In each post, in fact, a component with a library for the gallery is inserted in the loop. In viewing all the posts in the feed, everything is in its place. But as soon as I click on the picture, the view opens where there are always photos from the last post.

Here is the html code

<div *ngFor="let item of postsGroup; let i = index" [attr.data-index]="i"  style="margin-top: 15px;" class="card col-md-8 p-0">
<div class="card-header">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="avatar-post">
  {{item.postTitle}}
</div>
<div class="card-body row">
  <div class="col-md-12">
    <p class="card-text">
      {{item.postBody}}
    </p>
    <div *ngIf="item.photos.length > 0" class="row">
      <p id="{{i"  class="container" gallerize>
        <img style="padding:1px; height: 70px; width: auto;" class="col-md-3"  *ngFor="let img of item.photos" [src]="img.srcUrl">
      </p>
    </div>
    </div>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Posts I have in a variable written explicitly. 

suc => {
    this.postsGroup = suc;
    this.ngxLoader.stop('group');
  },
  err => {
    this.ngxLoader.stop('group');
  });

I have already tried 300 options. And a separate array was made in the code, it still loads the photos from the last post to view in full mode. enter a description of the image here

I get the gallery from the last post. What am I doing wrong? enter a description of the image here

Author: FX_Sektor, 2019-11-09
Source

1 answers

I found a solution after rereading the documentation and dancing with a tambourine. As a result, I got a full-fledged solution that works perfectly and flawlessly. I answer my own question, maybe someone will need it.

  1. In the post itself, we just draw the images in a loop and remove the gallerize attribute like this:

<div *ngIf="item.photos.length > 0" class="row">
          <p class="container">
            <img (click)="open(i,t)" [attr.data-index]="i" style="padding:1px; height: 70px; width: auto;"
              class="col-md-3" *ngFor="let img of item.photos; let t = index" [src]="img.srcUrl">
          </p>
        </div>

We hang an event on it by clicking. Here is the code of the open event itself

 async mappingImg(index): Promise<GalleryItem[]> {
    return this.postsGroup[index].photos.map(item => new ImageItem({ src: item.srcUrl, thumb: item.previewUrl }));
  }

  async open(index, indexPhoto) {
    this.itemsImg = [];
    this.itemsImg = await this.mappingImg(index);
    this.lightboxRef.load(this.itemsImg);
    this.showPhoto = true;
    this.lightbox.open(indexPhoto);
  }

Our gallery with the gallerize attribute now zaharkodina lies at the bottom of the page. It will be opened for viewing. And yes, it is completely empty, since we will set the entire config in ngOnInit

<p *ngIf="showPhoto" gallerize>
  <img >
</p>

And most importantly, the config in ngOnInit()

 this.lightboxRef = this.gallery.ref('lightbox');
    this.lightboxRef.setConfig({
      imageSize: ImageSize.Contain,
      loadingMode: 'indeterminate',
      thumbPosition: ThumbnailsPosition.Bottom
    });
    this.lightbox.setConfig({
      panelClass: 'fullscreen',
    });
    this.lightbox.closed.subscribe(event => this.close(event));

As you can see, we subscribe to the "close" view event. Here is the close(event) 

close(event) {
    this.itemsImg = [];
    this.showPhoto = false;
  }

Hide and clean the gallery otherwise there will be a large sheet down the page)

Well, forget about the variables in at the beginning of the class and the necessary import

import { Lightbox } from '@ngx-gallery/lightbox';
import { Gallery, GalleryItem, ImageItem, ThumbnailsPosition, ImageSize, GalleryRef } from '@ngx-gallery/core';

export class GroupComponent implements OnInit {
  lightboxRef: GalleryRef;
  itemsImg: GalleryItem[];
  showPhoto = false;

In the constructor

public gallery: Gallery, public lightbox: Lightbox,
 0
Author: FX_Sektor, 2019-11-11 01:09:00