Ionic 离子Angular 应用：如何使用滑动器显示幻灯片索引？

tzxcd3kk 于 2023-09-28 发布在 Ionic

关注(0)|答案(2)|浏览(156)

谁能告诉我为什么索引属性的插值不起作用？该值保持固定在1。
.html格式

<swiper (slideChange)="onSlideChange($event)">   
  <ng-template *ngFor ="let image of this.images, let i = index" swiperSlide>
     <ion-list style="align-items:center">
        <ion-img class="image" [src]="image.data"></ion-img>
        <ion-label>{{image.name}}</ion-label>
     </ion-list>
  </ng-template>
</swiper> 
<ion-label>{{index}}/{{this.images.length}}</ion-label>

.ts

images = [....];
index = 1;
onSlideChange(event){
    this.index = event[0].activeIndex+1;
    console.log(this.index);
}

p.s控制台每隔（slideChange）打印正确的索引值

ionic-framework

来源：https://stackoverflow.com/questions/71606553/ionic-angular-application-how-to-show-slide-index-using-swiper

2条答案

按热度按时间

bsxbgnwa1#

使用NgZone
.html格式

<swiper
  [slidesPerView]="1"
  [spaceBetween]="50"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange($event)"
>

component.ts

import { Component, OnInit, NgZone } from '@angular/core';

export class YourComponent implements OnInit {
  public index = 0;

  constructor(
    private _ngZone: NgZone
    ) { }

  onSlideChange(e) {
    const current_index = e[0].activeIndex;
    this._ngZone.runOutsideAngular(() => {
      this._increaseProgress(current_index,() => {
        this._ngZone.run(() => { 
          // console.log('Outside Done!'); 
        });
      });
    });
    console.log("Prints current index on slide change",this.index)
  }

  _increaseProgress(current_index,doneCallback: () => void) {
    this.index = current_index;
    doneCallback();
  }
}

赞(0）回复(0）举报 2023-09-28

jmp7cifd2#

您可以使用getActiveIndex（）阅读官方文档https://ionicframework.com/docs/v3/api/components/slides/Slides/#getActiveIndex

赞(0）回复(0）举报 2023-09-28