编辑:添加stackblitz:
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;
}
但是只有一个元素的元素改变了样式。
将activeIndex类设置为currentIndex === i
。如果将其设置为array [i],您将获得数组的字母而不是您要查找的索引号。
<ion-col [ngClass]="{'activeIndex': currentIndex === i}">
{{ array }}
</ion-col>