Angular 集合更新后 Ionic 滑块空白

Question

我的页面上有一个 ion-slides 实例显示一些图像：

<ion-slides class="to-top" pager>
    <ion-slide *ngFor="let image of detailImages">
        <img src="{{ image }}" alt="">
    </ion-slide>
</ion-slides>

集合 detailImages 在页面加载开始时加载，是包含指向我的媒体提供商的图像 URL 的字符串集合。这是我加载 detailImages（在页面加载时加载）的地方：

 loadDetailImages(ParentID: number) {
    this.detailService.getImagesCollection(ParentID).pipe(
        map(resp => {
            //Some mapping
        })
    ).subscribe(result => {
        for (let i = 0; i < result.length; i++) {
            let urlString = "http://res.cloudinary.com/someuser/image/v123456/" + result[i].CloudinaryTag + ".jpg"
            this.detailImages.push(urlString)
        }

    });
}

到目前为止，这个实现效果很好。但是，每当我从 detailImages 中删除一个项目时，整个寻呼机都会变成空白（白色），没有任何内容可以滚动。

这是从集合中删除图像的代码：

deleteImage(imageURL: any) {
    this.detailService.deleteDetailImage({ imageURL: imageURL }).pipe(
        map(resp => {
            //Do some mapping working
        })
    ).subscribe(result => {
        if (result) {
            this.detailImages.splice(this.slides.getActiveIndex(),1);
            this.slides.update();
            this.toastCtrl.create({ message: "Image Removed", showCloseButton: true,duration:3000 }).present();
        }
    });
}

我确实尝试更新滑块：

 @ViewChild(Slides) slides: Slides;

 // and then after remove item call this
 this.slides.update();

但这没有任何效果。我不确定这是 Angular 问题还是 Ionic 问题。

我正在使用 Angular 5.0.3 和 Ionic-Angular 3.9.2

Answer 1

要手动重新加载 UI，您可以使用 Angular ChangeDetectorRef

在您的 .ts 文件中

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr:ChangeDetectorRef) {}

deleteImage(imageURL: any) {
    this.detailService.deleteDetailImage({ imageURL: imageURL }).pipe(
        map(resp => {
            //Do some mapping working
        })
    ).subscribe(result => {
        if (result) {
            this.detailImages.splice(this.slides.getActiveIndex(),1);
            this.slides.update();
            this.toastCtrl.create({ message: "Image Removed", showCloseButton: true,duration:3000 }).present();
            // This will force all the components to reload
            this.cdr.detectChanges();
        }
    });
}

Answer 2

我发现了问题 - 经过一些测试后，我发现问题仅在我删除幻灯片中的最后一张图片时出现。生成错误是因为 Ionic Slider 模块在刷新后会记住最后一个活动索引，这会导致它尝试访问不存在的索引。要解决此问题，我必须添加的是：

this.slides.slideTo(0);

Answer 3

我通过在 ion-slides 上添加 *ngIf="detailImages.length" 解决了这个问题：

<ion-slides class="to-top" pager *ngIf="detailImages.length">
    <ion-slide *ngFor="let image of detailImages">
        <img src="{{ image }}" alt="">
    </ion-slide>
</ion-slides>`

Angular 集合更新后 Ionic 滑块空白

Angular Ionic slider blank after collection update

ionic-framework

ionic3

angular

angular5