Question

我收到此错误＆＃34;无法读取属性＆＃39; scrollToBottom＆＃39;未定义＆＃34;并且没有任何地方可以解决这个问题，因此这篇文章：

这是我的用例：我有一个自定义手风琴列表，并点击其中一个列表（因为它将有一些内容）我希望用户不要滚动到底部，因此使用该属性。我只粘贴了相关代码

这是我的.ts

import { Component, ViewChild } from '@angular/core';
import { NavController,Platform, Navbar, 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);
        } 
      });
    }
  }
}

这是我的.html文件，

<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>

版本信息

cli包：（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

全球套餐：

Cordova CLI : 7.0.1

本地包裹：

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

系统：

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

Answer 1

这在您的函数中不再指向您的类，但它现在指的是方法 IonAccordion 中的DOM对象。请改用这个技巧：

import { Content } from 'ionic-angular';

@ViewChild(Content) content: Content;

    IonAccordion(){
        const scope = this;
        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";
              scope.content.scrollToBottom(300);
            } 
          });
        }
      }

Answer 2

除了胖箭头功能问题，您还没有从ionic-angular导入content，因此您没有定位到您的网页内容。将您的代码更改为：

import { Content } from 'ionic-angular';

@ViewChild(Content) content: Content;

在此之后，您的scrollToBottom方法应该有效。

Answer 3

类似的问题和我的解决方案。离子4和角8。

// header
import { ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

//elements
@ViewChild(IonContent, {static: true}) content: IonContent;

//functions
this.content.scrollToTop(500);
this.content.scrollToBottom(500);

无法阅读属性＆＃39; scrollToBottom＆＃39;未定义＆＃34;

这是我的.ts

这是我的.html文件，

版本信息

3 个答案: