时间戳

首页 > 解决方案 > Ionic v4 和 Angular 无法获取循环生成幻灯片的 ion-slide 的内部文本

angular - Ionic v4 和 Angular 无法获取循环生成幻灯片的 ion-slide 的内部文本

问题描述

我在<ion-slide>使用*ngFor循环定义的数组时显示了一个数组：

status: string[] = [
  'Active',
  'Inactive',
  'Ended'
];
@ViewChild('slideWithNav') slides: IonSlides;
@ViewChild('status') slide: IonSlide;

这是html脚本：

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

当幻灯片发生变化时，我需要获取 , 的值s来运行特定的功能。

我尝试使用以下方式访问它(ionSlideDidChange)：

SlideDidChange(s) {
    console.log(this.slides);
}

但我找不到任何与<ion-slide>内在价值相关的东西。

我尝试了以下脚本：

import { Slides } from 'ionic-angular'; 
import { ViewChild, ViewChildren, QueryList } from '@angular/core';

@ViewChildren('CardSlider') cardSliders: QueryList<Slides>;

onCardChanged(){ let slides= this.slides.toArray(); 
    let slider= slides[this.currentSuitIndex]; 
    this.currentCardIndex[this.currentSuitIndex] = cardSlider.getActiveIndex(); 
    console.log('Status', slider.getActiveIndex()); 
}

但它也没有奏效。所需的输出是当我在Active幻灯片中时，我需要控制台“活动”并运行所需的方法。

标签： angularionic-frameworkslideionic4ion-slides

解决方案

我找到了解决方案。显然，激活的索引是一个承诺：

SlideDidChange(s)
{
  this.slides.getActiveIndex().then(
     (index)=>{
       this.currentIndex = index;
    });
}

通过使用.then()，我们可以获得当前索引，并使用SWITCH案例到案例索引并相应地运行所需的方法。

推荐阅读