Ionic 4 ion-slides изменяют стиль css активного слайда с помощью ngClass - PullRequest
Новая
       51

Ionic 4 ion-slides изменяют стиль css активного слайда с помощью ngClass

1 голос
/ 13 марта 2019

РЕДАКТИРОВАТЬ: добавление стекаблиц:

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

Я использую ионные слайды следующим образом: 

<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]='', но я не знаю, как.

Я получаю индекс активных слайдов, используя: 

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

Но стиль изменяется только один элемент массива.

1 Ответ

2 голосов
/ 14 марта 2019

Установите для класса activeIndex значение currentIndex === i.Если вы установите его в массив [i], вы получите буквы массива вместо искомого номера индекса.

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

Работает Стекблит

...