Question

离子画廊专辑

我能够以网格格式查看所有图像，如果我选择其中一个，我需要从中启动离子幻灯片图像..

示例代码

<ion-slides zoom="true">
    <ion-slide *ngFor="let img of images.imageUrl>
      <div class="swiper-zoom-container">
        <img style="max-width: 95%;" [src]="img.url" (click)="downloadicon()"/>
      </div>
      <span class="icon-save notify" *ngIf="showimage" (click)="downloadImage(img.url,img.public_id)"></span>
    </ion-slide> 
  </ion-slides>

注意：

images.imageUrl - 包含所有图像的数组

Answer 1

我会说有2个选项

当用户选择一个时，只需要创建另一个数组。并在模板中使用该数组。
当用户选择一个时，保存索引号。并在ng中添加条件，如下所示：

我希望这将是helpfule

<ion-slide *ngFor="let img of images.imageUrl | slice:index ">

或

<ion-slide *ngFor="let img of images.imageUrl;let row = index">
        <div *ngIf="row > selectedIndex">
            ...
        </div>
    </ion-slide>

Answer 2

需要从给定的数组索引
启动循环* ngFor

<ion-slides zoom="true">
        <ion-slide *ngFor="let img of images.imageUrl | slice:index ">
          <div class="swiper-zoom-container">
            <img style="max-width: 95%;" [src]="img.url" (click)="downloadicon()"/>
          </div>
          <span class="icon-save notify" *ngIf="showimage" (click)="downloadImage(img.url,img.public_id)"></span>
        </ion-slide> 
      </ion-slides>

Answer 3

您可以在点击事件上调用goToSlide（） -

class MyPage {
  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);
  }
}

需要从给定的数组索引启动循环* ngFor

3 个答案: