Angular index problems 8 with Ks-modal-gallery

Question

I’m performing a series of upload photos that are rendered on screen and displayed in Angular 8 index issues with Ks-modal-gallery... It turns out that when I performed the Component loading they appear normally, but when I add a new image and click on it accuses the following error:

Cannot get the current image index in current-image
ERROR Error: image must be a valid Image object
    at getIndex 

When I click on the other ones they normally open, but I notice that the new images did not enter the display Carousel. Below is the code in my Component.html:

<div class="row" itemscope="" class="" itemprop="thumbnail">
    <section>
        <div class="my-app-custom-plain-container-with-desc row"  >
            <ng-container *ngFor="let img of imagens">
                <figure class="my-app-custom-image-with-desc col-xl-3 col-md-4 col-6 img-zises">
                    <img [src]="img.modal.img" (click)="openImageModalRowDescription(img)" class="img-zises" />
                </figure>
            </ng-container>
        </div>
        <ks-modal-gallery [id]="1" 
               [modalImages]="imagens" 
              [plainGalleryConfig]="customPlainGalleryRowDescConfig"
             [buttonsConfig]="buttonsConfigCustom"
            (buttonBeforeHook)="onButtonBeforeHook($event)" 
            (buttonAfterHook)="onButtonAfterHook($event)">
        </ks-modal-gallery>
    </section>
</div>

Here follows the code of the Component.ts

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { FileUploader } from 'ng2-file-upload';
import {
  ButtonsConfig,
  ButtonsStrategy,
  DotsConfig,
  GalleryService,
  Image,
  ButtonEvent,
  ButtonType,
  PlainGalleryConfig,
  PlainGalleryStrategy,
  AdvancedLayout,
} from '@ks89/angular-modal-gallery';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FotosProfessorService } from './fotos-professor.service';
import { Observable } from 'rxjs';
import { AppToastService } from 'src/app/shared/services/app-toast.service.ts.service';
import { FotosPessoaFisica } from 'src/app/shared/interfaces/Pessoas/fotos-pessoa-fisica-interface';

@Component({
  selector: 'app-fotos-professor',
  templateUrl: './fotos-professor.component.html',
  styleUrls: ['./fotos-professor.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FotosProfessorComponent implements OnInit {

fotosPessoaFisica: Array<FotosPessoaFisica> = []
  rectImages$: Observable<FotosPessoaFisica[]>
  imagens: Image[]= [];

 customPlainGalleryRowDescConfig: PlainGalleryConfig = {
    strategy: PlainGalleryStrategy.CUSTOM,
    layout: new AdvancedLayout(-1,true)
  };

  ngOnInit() {
    this.uploadForm = this.formBuilder.group({

    })
    this.listarGaleriaDeFotos();
  }

  listarGaleriaDeFotos() {
    this.rectImages$ = this.fotosProfessorService.listarFotos(this.pessoaFisicaId)
    this.rectImages$.subscribe(
      fotos => {
        this.fotosPessoaFisica = fotos;
        this.fotosPessoaFisica.map(foto => {
          const imagem = new Image(
            foto.id,
            { // modal
              img: foto.picture_url,
            },
          )
          this.imagens.push(imagem)
        })
        this.verificaQuantidadeDeFotosListadas(this.imagens.length);
      },
      error => {
        console.log(error);
      }
    )
  }

}

Up to this point usually occurs the display because I pass everything inside the array of images that will be rendered. However, when I execute the addition of a new photo it renders but the index error occurs. It follows the file upload method in Component.ts as well.

uploadSubmit() {

    for (let j = 0; j < this.uploader.queue.length; j++) {
      let data = new FormData();
      let fileItem = this.uploader.queue[j]._file;
      data.append('file', fileItem);
      data.append('pessoa_fisica_id', this.pessoaFisicaId);
      this.uploadFile(data).subscribe(
        foto => {
          let imagem = new Image(
            foto.id,
            {
              img: foto.picture_url,
            },
          )
          this.imagens.push(imagem)
          this.verificaQuantidadeDeFotosListadas(this.imagens.length);
        },
        error => {
          console.log(error);
        }
      )
    }

    this.toaster.sucesso('Fotos salvas com sucesso');
    this.modalService.dismissAll();
    this.uploader.clearQueue();
  }

Finally when the photo is added I click on any image of the gallery that adds the method below, but in the new picture the error shown always occurs. Would anyone know what the problem would be?

Method calling the Ks-modal-gallery

  openImageModalRowDescription(image: Image) {
    const index: number = this.getCurrentIndexCustomLayout(image, this.imagens);
    this.customPlainGalleryRowDescConfig = Object.assign({}, this.customPlainGalleryRowDescConfig, { layout: new AdvancedLayout(index, true) });
  }

  private getCurrentIndexCustomLayout(image: Image, images: Image[]): number {
    let index = image ? images.indexOf(image) : -1;
    return index;
  };

Would anyone know how to solve this problem or point out where the error is occurring?

Answer 1

When you add an image and do the images.push(imagem), the array is updated, but the component itself does not create the bind of the variable. It is a stop of Angular itself.

In order to update the component and bind you need to match a new variable, in case a new array of images.

For example, once you push the array you do: images = [...images,imagem] or images.concat(imagem), so angular understands that it needs to bind to the input component.