离子框架幻灯片组件“循环”选项

Question

我目前正在使用 Ionic-Angular 开发应用程序。 对于幻灯片，我使用 ionic 4 ion-slides 组件，一切正常，但我正在寻找一种循环幻灯片的方法，以便用户可以在数组末尾没有锁定的情况下滑动 根据离子文档 => ion-slides

和Swiper API

我可以通过在选项中使用循环属性来实现这一点，所以我按照说明进行操作，但它似乎不起作用，并且幻灯片锁定在数组的末尾 我的 HtMl 代码是：

<ion-slides #theSlides [options]="slideOpts"   id="peerSlide">
    <ion-slide *ngFor="let peer of peers;let i = index">
       <img id="{{'x' + i}}" class="peerIcon" [src]="peer.icon" >
     </ion-slide>
</ion-slides>
<img class="nextIcon" src="../../assets/imgs/nextIcon/nextIcon@3x.png" (click)="moveToNext(theSlides)">
<img class="prevIcon" src="../../assets/imgs/prevIcon/prevIcon@3x.png" (click)="moveToPrev(theSlides)">

还有我的 .ts 文件：

export class LivePage implements OnInit {
  @ViewChild('theSlides' , {  static: true }) slides: IonSlides;
 
  slideOpts = {
  loop: true,
   };

  ...
  moveToNext(slides) {
   slides.slideNext()
  }
  moveToPrev(slides) {
   slides.slidePrev()
  }
 }

如果您能说出我的代码有什么问题，我将不胜感激。

更新：当我尝试不使用 ngFor 时，循环会正常工作，但使用 ngFor 时就不行

Answer 1

使用相同的代码对我有用 ("@ionic/angular": "^5.0.0") 尝试更新您的依赖项