Ionic v4 и Angular не могут получить внутренний текст ion-слайда слайдов, сгенерированных циклом

#angular #ionic-framework #slide #ionic4 #ion-slides

#angular #ionic-framework #слайд #ionic4 #ion-slides

Вопрос:

У меня отображается массив при <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 слайде, мне нужно нажать консоль «Active» и запустить требуемый метод.

Ответ №1:

Я нашел решение. По-видимому, активированный индекс является обещанием:

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

С помощью .then() мы можем получить текущий индекс и использовать SWITCH индексы от случая к случаю и соответствующим образом запустить требуемые методы.