需要从给定的数组索引启动循环 *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

我会说有 2 个选项

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>