Angular 如何在滑块末端创建一个按钮，该按钮可以更改并显示Ionic 4中的下一张幻灯片？

我试图在滑块下添加一个按钮，按下该按钮时，应将我移动到滑块上的下一张幻灯片。在最后一张幻灯片上，我想更改按钮。我已经尝试了一些功能，如Swipenext和nex功能，但仍然不起作用，我收到了很多错误。当我按下页面末尾的“下一步”按钮转到下一张幻灯片时，控制台上出现两个错误，该按钮不起作用。一个错误表示“无法读取未定义的属性“getactiveindex”，这是.ts文件中下一个函数的一部分，在本地终端上没有错误，并且编译成功。我还试图更改上一张幻灯片中的文本，我尝试了ionslidechange（）函数，但它不起作用

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: {…}}

home.html
العربية
嗨，欢迎！
新一代移动钱包。通过您的手机在世界各地发送和接收付款。
幻灯片2
幻灯片3
幻灯片4
幻灯片5
{{buttonName}}
home.ts
从“@angular/core”导入{Component，ViewChild，ViewChildren}；
从'@ionic/angular'导入{Ionislides}；
从“离子角度”导入{Slides}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:'home.page.html'，
样式URL:['home.page.scss']，
})
导出类主页{
@ViewChildren（“幻灯片”）幻灯片：iSlides；
buttonName=“下一步”；
所选幻灯片：任意；
slideOpts={
循环：对，
自动播放：对
};
构造函数（）{}
幻灯片更改（幻灯片）{
this.selectedSlide=幻灯片；
slides.getActiveIndex（）。然后(
（幻灯片索引）=>{
如果（SlideIndex==5）{
this.buttonName=“Continue”；
}否则{
this.buttonName=“下一步”；
}
});
}
下一个（）{
这个.selectedSlide.getActiveIndex（）。然后（（SlideIndex）=>{
如果（SlideIndex==5）{
日志（“完成滑块”）；
}否则{
这个.selectedSlide.slideNext（）；
}
});
}
}
按下“下一步”按钮时的控制台
错误类型错误：slides.getActiveIndex不是函数
在HomePage.com上更改（home.page.ts:29）
在Object.eval[as handleEvent]（HomePage.html:22）
在handleEvent（core.js:38098）
在callWithDebugContext（core.js:39716）
在Object.debugHandleEvent[作为handleEvent]（core.js:39352）
在dispatchEvent（core.js:25818）
在core.js:37030
在HTMLElement。（platformbrowser.js:1789）
在ZoneDelegate.invokeTask（zone everyver.js:391）
位于Object.onInvokeTask（core.js:34182）
查看_HomePage_0@HomePage.html:21
proxyClass@compiler.js:19436
logError@core.js:39651
handleError@core.js:9162
dispatchEvent@core.js:25822
（匿名）@core.js:37030
（匿名）@platform browser.js:1789
invokeTask@zone everyver.js:391
onInvokeTask@core.js:34182
invokeTask@zone evergreen.js:390
runTask@zone everyver.js:168
invokeTask@zone evergreen.js:465
invokeTask@zone evergreen.js:1603
globalZoneAwareCallback@zone evergreen.js:1629
emit@core-ca0488fc.js:1999
（匿名）@swiper.bundle-ccdaac54.js:1078
（匿名）@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
异步函数（异步）
initSwiper@ion-slide_2-md.entry.js:229
（匿名）@ion-slide_2-md.entry.js:71
调用@zone evergreen.js:359
运行@zone evergreen.js:124
(匿名)@zone everyvang.js:855
invokeTask@zone everyver.js:391
runTask@zone everyver.js:168
drainMicroTaskQueue@zone evergreen.js:559
Promise.then（异步）
scheduleMicroTask@zone evergreen.js:542
scheduleTask@zone everyver.js:381
scheduleTask@zone evergreen.js:211
scheduleMicroTask@zone evergreen.js:231
ScheduleSolveorReject@zone evergreen.js:845
然后@zone evergreen.js:955
nextTick@core-ca0488fc.js:156
（匿名）@core-ca0488fc.js:95
（匿名）@core-ca0488fc.js:1219
然后@core-ca0488fc.js:1341
scheduleUpdate@core-ca0488fc.js:1219
附表@core-ca0488fc.js:1764
初始化组件@core-ca0488fc.js:1775
异步函数（异步）
初始化组件@core-ca0488fc.js:1713
（匿名）@core-ca0488fc.js:1851
调用@zone evergreen.js:359
运行@zone evergreen.js:124
(匿名)@zone everyvang.js:855
invokeTask@zone everyver.js:391
runTask@zone everyver.js:168
drainMicroTaskQueue@zone evergreen.js:559
Promise.then（异步）
scheduleMicroTask@zone evergreen.js:542
scheduleTask@zone everyver.js:381
onScheduleTask@zone evergreen.js:272
scheduleTask@zone evergreen.js:372
scheduleTask@zone evergreen.js:211
scheduleMicroTask@zone evergreen.js:231
ScheduleSolveorReject@zone evergreen.js:845
resolvePromise@zone evergreen.js:791
(匿名)@zone everyvang.js:707
webpackJsonpCallback@bootstrap:25
（匿名）@home-home-module.js:1
HomePage.html:21错误上下文调试上下文{view:{…}，nodeIndex:21，nodededef:{…}，elDef:{…}，elView:{…}

好了，伙计们，我犯了一个愚蠢的错误。我应该在html页面的iSlides中添加#幻灯片。我希望这能帮助其他人

     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 
#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();
      }
    });
  }
}

home.html
العربية
嗨，欢迎！
新一代移动钱包。发送和接收所有付款
通过你的手机环游世界。
幻灯片2
幻灯片3