ngx-gallery 无法通过编程方式交换图片位置问题求助

问题原因 #

ngx-gallery 对输入的图片数组采用引用变更检测策略，你直接原地交换数组内部元素的操作不会改变数组本身的内存引用，组件无法感知到数据变化，因此不会触发视图更新。你能通过push、pop方法正常增删，是因为这两个操作恰好会触发组件内部对数组变更的额外监听逻辑，而原地修改元素的操作不会被监听到。

解决方法 #

只需要在交换数组元素后，重新为图片数组赋值一个新的数组实例，触发Angular的输入变更检测即可，不需要直接操作组件实例内部的thumbnails、images属性。
修改后的swap方法代码如下：

swap() {
  console.log("button clicked!");
  // 先交换原数组的元素
  [this.galleryImages[2], this.galleryImages[0]] = [this.galleryImages[0], this.galleryImages[2]];
  // 用展开运算符生成新数组赋值，触发变更检测
  this.galleryImages = [...this.galleryImages];
  // 如果需要交换后自动跳转到新的第一张图，加上下面这行即可
  this.gallery.show(0);
}

你原来的HTML代码不需要做任何修改，修改后点击按钮就可以同步更新缩略图、主视图、预览大图的所有顺序。

内容的提问来源于stack exchange，提问作者chuckd