Я пытаюсь добавить кнопку под слайдером, которая при нажатии должна переместить меня к следующему слайду на слайдере. На последнем слайде я хочу, чтобы кнопка менялась. Я перепробовал несколько функций, таких как Swipenext и nex, но все же он не работает, и я получаю много ошибок. Когда я нажимаю следующую кнопку в конце страницы, чтобы перейти к следующему слайду, я получаю две ошибки на консоли, и кнопка не работает. Одна ошибка гласит, что «Не удается прочитать свойство 'getactiveindex' undefined", которое является частью следующей функции в файле .ts, на локальном терминале нет ошибок, и оно успешно компилируется. Я также пытаюсь изменить текст на последнем слайде, и я попробовал функцию ionlidechange (), и она не работает
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
[options]="slideOpts" autoplay="false" (ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}
Console when I press the next button
ERROR TypeError: slides.getActiveIndex is not a function
at HomePage.ionSlideChange (home.page.ts:29)
at Object.eval [as handleEvent] (HomePage.html:22)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent [as handleEvent] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
View_HomePage_0 @ HomePage.html:21
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
emit @ core-ca0488fc.js:1999
(anonymous) @ swiper.bundle-ccdaac54.js:1078
(anonymous) @ swiper.bundle-ccdaac54.js:1077
emit @ swiper.bundle-ccdaac54.js:1071
transitionEnd$1 @ swiper.bundle-ccdaac54.js:1906
slideTo @ swiper.bundle-ccdaac54.js:1994
init @ swiper.bundle-ccdaac54.js:3919
Swiper @ swiper.bundle-ccdaac54.js:3762
initSwiper @ ion-slide_2-md.entry.js:231
async function (async)
initSwiper @ ion-slide_2-md.entry.js:229
(anonymous) @ ion-slide_2-md.entry.js:71
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
nextTick @ core-ca0488fc.js:156
(anonymous) @ core-ca0488fc.js:95
(anonymous) @ core-ca0488fc.js:1219
then @ core-ca0488fc.js:1341
scheduleUpdate @ core-ca0488fc.js:1219
schedule @ core-ca0488fc.js:1764
initializeComponent @ core-ca0488fc.js:1775
async function (async)
initializeComponent @ core-ca0488fc.js:1713
(anonymous) @ core-ca0488fc.js:1851
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
HomePage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}