angular - 修改图像数组后，如何重新加载或刷新 ngx-gallery 缩略图？

Question

我正在使用ngx-gallery来显示图像。我想在修改订单时重新加载图像或在缩略图库、主图像和整页图像中刷新它们（例如交换图像数组中的图像 1 和 3）

问题- 我不知道如何重新加载/重置/重新渲染/刷新缩略图库。如果没有 ngx-gallery 的方式来做，也许有打字稿的方式？

这是我到目前为止尝试过的

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

在我的 .ts 文件中

1. 将图像设置为 null 然后替换图像：

   this.galleryImages = null;

   this.galleryImages = this.memberService.member.photos;

2. 使用了文档中的 show(0) 方法 - 显示图像 0 但未在缩略图库中重新排列顺序

   @ViewChild('gallery') 画廊：NgxGalleryComponent;

   this.gallery.show(0);

3. 我也试过

   this.gallery.thubmnails.reset(1);

   this.gallery.thubmnails.reset(0);

   this.gallery.ngOnInit();

更新- 我在组件中找到了 thumbnail 属性，所以我可以更改缩略图的顺序，但仍然找不到更改主图像顺序的方法。

这是我更改缩略图排序的方法

[this.gallery.thubmnails.images[index], this.gallery.thubmnails.images[0]]
    = [this.gallery.thubmnails.images[0], this.gallery.thubmnails.images[index]];

但这不会改变其他图像的顺序，当我尝试使用相同的方法时，它不适用于更大的（整页、页面）图像。

Update2我使用了一个间隔来提供解决方法并让它做我想做的事情。在我重新排序“this.memberService.member.photos”后，我清除了数组，然后用值重置它。没有间隔它不起作用。

[this.memberService.member.photos[index], this.memberService.member.photos[0]]
    = [this.memberService.member.photos[0], this.memberService.member.photos[index]];
this.galleryImages = [];
setInterval(() => {
  this.galleryImages = this.memberService.member.photos;
}, 0);

标签： angulartypescriptngx-gallery