需要从给定的数组索引开始循环 *ngFor

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

您可以在点击事件上调用 goToSlide()-

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

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

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

我会说有两种选择

1. 只需在用户选择一个数组时创建另一个数组。 并且只使用模板中的数组。

2. 当用户选择一个时，保存索引号。并在 ngFor 中添加条件，如下所示：

希望对你有帮助

<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>