离子4离子幻灯片使用ngClass更改活动幻灯片的CSS样式

问题描述

添加堆叠闪电战:

https://stackblitz.com/edit/ionic-b2r7si

我正在使用离子载玻片，如下所示:

I am using ion-slides as following:

<ion-slides class="fullWidth" [options]="slideOptsOne" #slideWithNav
  (ionSlideDidChange)="change($event)">
  <ion-slide #status *ngFor="let array of arrays">
    <ion-col>
      {{array}}
    </ion-col>
  </ion-slide>
</ion-slides>

我需要更改当前活动幻灯片的CSS样式，例如使其带有下划线或加粗.我已经做了一些研究，显然我应该使用[ngClass]=''，但不知道如何.

I need to change the css style of the current active slide, like make it underlined or bold. I've done some researches and apparently I should use [ngClass]='' but can't know how.

我正在使用以下方法获取活动幻灯片的索引:

I am getting the index of the active slides using:

change(e) {
    this.slides.getActiveIndex().then(
      (index) => {
        this.currentIndex = index;
        console.log(this.currentIndex);
      }
    )
}

我尝试过:

  <ion-slide #status *ngFor="let array of arrays;let i=index;">
      <ion-col [ngClass]="{'activeIndex': currentIndex==array[i]}">
        {{array}}
      </ion-col>
    </ion-slide>

和activeIndex样式:

.activeIndex{
  font-size: 1.5em;
}

但是数组中只有一个元素的样式发生了改变.

But only one element of the array is changed of style.

推荐答案

将activeIndex类设置为currentIndex === i.如果将其设置为array [i]，则会得到数组的字母，而不是要查找的索引号.

Set the activeIndex class to currentIndex === i. If you set it to array[i], you will get letters of the array instead of the index number you are looking for.

<ion-col [ngClass]="{'activeIndex': currentIndex === i}">
  {{ array }}
</ion-col>

正在工作 stackblitz

这篇关于离子4离子幻灯片使用ngClass更改活动幻灯片的CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！