Cannot read property ‘scrollToBottom’ of undefined”

Ionic Framework ionic-v3
1

Hello Folks,

I am getting this error “Cannot read property ‘scrollToBottom’ of undefined” and haven’t got a solution to this anywhere, hence this post:

Here is my use case:
I have a custom accordion list, and on click of one of the list (since it will have some content) I want the user not to scroll to the bottom, hence using that property. I have only pasted the relevant code

This is my .ts

import { Component, ViewChild } from '@angular/core';
import { NavController,Platform, Content} from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
@Component({
selector: 'page-profile',
templateUrl: 'profile.html'
})
export class ProfilePage {  
@ViewChild('content') content: any;  
constructor(public navCtrl: NavController, private nativeStorage : NativeStorage, private toastCtrl : ToastController, platform : Platform  ) { 
// other methods 
}
 ionViewDidLoad()
  {
    this.IonAccordion()
  }

IonAccordion(){
    this.accElement = document.getElementsByClassName('ion-accordion-header');
    var i;
     for (i = 0; i < this.accElement.length; i++) {
      console.log(i)
      this.accElement[i].addEventListener("click", function() 
      {
        this.classList.toggle("active");
        console.log("click");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          console.log(panel.style.maxHeight);
          panel.style.maxHeight = null;
        } else { 
          panel.style.maxHeight = panel.scrollHeight + "px";
          this.content.scrollToBottom(300);
        } 
      });
    }
  }
}

This is my .html file,


<ion-content #content>
<ion-row>
    <ion-col>
    <div class="ion-accordion-header">Accordion 1 </div>
    <div class="panel">
       <p>Accordion content</p>
    </div>
    </ion-col>
    </ion-row>
<ion-row>
    <ion-col>
    <div class="ion-accordion-header">Accordion 2 </div>
    <div class="panel">
       <p>Accordion content</p>
    </div>
    </ion-col>
    </ion-row>
</ion-content>

Version info

cli packages: (F:\classette\node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.3.0

System:

Node : v6.10.2
OS   : Windows 10
npm  : 3.10.10
2

Why don’t you use the (click) event on ion-accordion-header?

Answer to the question: it’s because you use function() { ... }.
Use

() => { … }

to pass the context to the function.

3

I thought of using (click) on the headers, but then again I would have multiple accordion, so having them on the script makes it easy for me to tweak or add new features.

when i use fat arrows like you mentioned, I don’t get access to

this.nextElementSibling or this.classList.toggle("active"); that’s one problem, I am still learning the correct way to do that, let me know your thoughts

4

Hello,

I see only one line with scrollToBottom.
So the error stated that at that time this.conent is not available, maybe not intiliazed, maybe typo, maybe to early in lifecycle, maybe…

Best regards, anna-liebt