ks-modal-gallery 的 Angular 8 索引问题

Question

我正在执行一系列照片，这些照片在屏幕上呈现并显示在 Angular 8 索引问题与 ks-modal-gallery ...事实证明，当我加载组件时它们正常显示，但是当我添加一个新的图片并单击它会导致以下错误：

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

当我点击其他它们正常打开时，但我注意到新图像没有进入显示轮播。下面是我的 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>

这是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);
      }
    )
  }

}

此时通常会出现显示，因为我传递了将要渲染的图像矢量内的所有内容。 但是当我执行添加新照片时，它会呈现但出现索引错误。遵循component.ts中的文件上传方法

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

方法调用 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;
  };

有谁知道如何解决这个问题或指出错误发生在哪里？

Answer 1

已解决..如果有人遇到同样的问题。事实证明，当我给图像更新和

this.imagens.push(image) 

它更新了数组，但没有更新组件。有必要在上传返回中这样放置：

this.images = [... this.images, image]

也就是说，传递现有的副本并添加另一个，最后组件被更新。现在一切正常

Answer 2

可能将 imagens 变量初始化为图像对象 Array 可能会完成这项工作。

在声明中更改 []

imagens: Image[]= [];

到

imagens : Image[] = new Array <Image> ();