无法在 ngx-gallery 中交换图像

Question

我在使用ngx-gallery 时遇到了一点问题，这里是github page 和我的 stackblitz example。

场景 - 我希望我的用户单击一个按钮将图像交换到图库中的第一张图像。

例如。用户单击按钮，将图像从位置 3 移动到图像位置 1。包括小缩略图、中图像（主查看器）和大预览图像。

问题 - 我尝试过的一切似乎都不起作用。我真的找不到任何交换索引的方法，当我手动交换它们时没有任何反应。

仅供参考 - 我可以通过 push 和 pop 向查看器添加和删除图像，但我无法以编程方式设置（交换）第一张图像。

stackblitz example

这是我尝试过的一些示例。

export class AppComponent implements OnInit {
  @ViewChild('gallery') gallery: NgxGalleryComponent;
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  constructor() {}

  ngOnInit() {
    this.galleryOptions = [{
        width: '600px',
        height: '400px',
        thumbnailsColumns: 4,
        arrowPrevIcon: 'fa fa-chevron-left',
        arrowNextIcon: 'fa fa-chevron-right',
        imageAnimation: NgxGalleryAnimation.Slide
      }
    ];

    this.galleryImages = [{
        small: 'https://preview.ibb.co/jrsA6R/img12.jpg',
        medium: 'https://preview.ibb.co/jrsA6R/img12.jpg',
        big: 'https://preview.ibb.co/jrsA6R/img12.jpg'
      },
      {
        small: 'https://preview.ibb.co/kPE1D6/clouds.jpg',
        medium: 'https://preview.ibb.co/kPE1D6/clouds.jpg',
        big: 'https://preview.ibb.co/kPE1D6/clouds.jpg'
      },
      {
        small: 'https://preview.ibb.co/mwsA6R/img7.jpg',
        medium: 'https://preview.ibb.co/mwsA6R/img7.jpg',
        big: 'https://preview.ibb.co/mwsA6R/img7.jpg'
      }, {
        small: 'https://preview.ibb.co/kZGsLm/img8.jpg',
        medium: 'https://preview.ibb.co/kZGsLm/img8.jpg',
        big: 'https://preview.ibb.co/kZGsLm/img8.jpg'
      },
    ];
  }

  swap() {
    console.log("button clicked!");

    // doesn't do anything
    [this.galleryImages[2], this.galleryImages[0]] = [this.galleryImages[0], this.galleryImages[2]];

    // doesn't do anything
    [this.gallery.thumbnails.images[2], this.gallery.thumbnails.images[0]] = [this.gallery.thumbnails.images[0], this.gallery.thumbnails.images[2]];

    // doesn't do anything
    [this.gallery.images[2], this.gallery.images[0]] = [this.gallery.images[0], this.gallery.images[2]];
  }

}

<div class="gallery-wrapper">
  <ngx-gallery #gallery [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>
</div>

<button (click)="swap()">swap image 1 and 3</button>

Answer 1

这可能是因为您正在改变数组。有时，只有在您没有发生变异时，Angular 更改检测才会生效。

当您更改数组（数组中的项或数组中项的顺序）但不更改数组引用时会发生变异。

为了避免变异尝试：

this.galleryImages = [this.galleryImages[2], this.galleryImages[1], this.galleryImages[0]]

或者，即使你确实改变了一个数组，你也可以通过在之后运行 lodash cloneDeep 来解决这个问题，这会在你改变之后得到一个新的引用：

import { cloneDeep } from 'lodash-es'

// your existing code
this.galleryImages = cloneDeep(this.galleryImages)

请注意，有一些不错的 npm 包可用于更改数组中项目的位置，例如 array-move - 这可以避免突变 - 请注意，还有其他不错的包，请在 npm 趋势上寻找竞争对手