ionic2: slideTo Runtime Error Cannot read property 'length' of undefined

[jeneser]

Ionic version: (check one with "x") [ ] 1.x [ x ] 2.x

I'm submitting a ... (check one with "x") [ x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Runtime Error
Error in ./HomePage class HomePage - caused by: Cannot read property 'length' of undefined

Stack
TypeError: Cannot read property 'length' of undefined
    at slideTo (http://localhost:8100/build/main.js:27047:36)
    at Slides.slideTo (http://localhost:8100/build/main.js:43084:95)
    at HomePage.onTabsChange (http://localhost:8100/build/main.js:56083:21)
    at CompiledTemplate.proxyViewClass.View_HomePage0.handleEvent_29 (/AppModule/HomePage/component.ngfactory.js:599:34)
    at CompiledTemplate.proxyViewClass.<anonymous> (http://localhost:8100/build/main.js:96697:37)
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/main.js:35084:36)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:87920:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:87869:22)
    at Subscriber._next (http://localhost:8100/build/main.js:87822:26)
    at Subscriber.next (http://localhost:8100/build/main.js:87786:18)

Expected behavior:

When i used slideTo() in ionViewDidEnter() and onSlideDidChange(), all going well.

But , i write slideTo() into onTabsChange(){}.I got the Runtime Error.

Why?

Steps to reproduce:

Related code:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  @ViewChild(Slides) slider: Slides;
  @ViewChild('myTabs') tabs: Tabs;

  tab1Root = JobPage;
  tab2Root = JobPage;
  tab3Root = JobPage;

  constructor(public navCtrl: NavController) {}

  ionViewDidEnter() {
    // this.slider.slideTo(2); <=== ok!
    this.tabs.select(0);
  }

  onSlideDidChange() {
    var slider_index = this.slider.getActiveIndex();
    var tab_index = this.tabs.getSelected().index;
    // this.slider.slideTo(2); <===ok!
    if (tab_index != slider_index) {
      this.tabs.select(slider_index);
    }
  }

  onTabsChange() {
    // var slider_index = this.slider.getActiveIndex();
    // var tab_index = this.tabs.getSelected().index;

     this.slider.slideTo(2);   <== err

    //if (tab_index != slider_index) {
   //  this.slider.slideTo(tab_index);
   // }
  }

}

home.html

<ion-tabs #myTabs tabsPlacement="top" (ionChange)="onTabsChange()">
    <ion-tab tabTitle="a" [root]="tab1Root"></ion-tab>
    <ion-tab tabTitle="b" [root]="tab2Root"></ion-tab>
    <ion-tab tabTitle="c" [root]="tab3Root"></ion-tab>
  </ion-tabs>

  <ion-slides #mySlider (ionSlideDidChange)="onSlideDidChange()">
    <ion-slide>
      <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic Framework: 2.0.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.2
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/55.0.2883.87 Chrome/55.0.2883.87 Safari/537.36

Similar: https://github.com/driftyco/ionic/issues/10499

[mhartington]

So you have the slides inside of a component that is loading tabs as well? I'm a bit confused, could you please provide a plunkr of the issue?

[jeneser]

@mhartington Yes!

http://plnkr.co/edit/tO0dkp?p=preview

---

Related code:

onTabsChange() {
    // var slider_index = this.slider.getActiveIndex();
    var tab_index = this.tabs.getSelected().index; // <== Error Cannot read property 'index' of null
    console.log(tab_index);
    this.slider.slideTo(2); // <== Error Cannot read property 'length' of undefined
    // if (tab_index != slider_index) {
    //   this.slider.slideTo(tab_index);
    // }
  }

There's another question. tabs.getSelected().index; // <== Error Cannot read property 'index' of null I created a new issue. https://github.com/driftyco/ionic/issues/10538

[transparentech]

Seems to be something wrong with the Slides internal '_slides' array because even calling length() on the Slides instance throws the same error.

In the Plunker, comment out: this.slider.slideTo(2); and replace it with console.log('length is:'+this.slider.length()); to see the error too.

[jgw96]

Hello all, I am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/10830

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.