scrollToBottom 不是 ionic 4 中的函数

Question

我在发帖之前进行了很多探索，但没有找到解决方案。但我遗漏了一些小东西。

下面是我的html

<ion-header>
  <ion-toolbar>
    <ion-title>chat</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content #content [scrollEvents]="true" (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()" fullscreen>

  <ion-list>
    <ion-item *ngFor="let item of dummyList">
      <ion-label>{{ item.value }}</ion-label>
    </ion-item>
  </ion-list>

</ion-content>
<ion-footer class="footersize">

  <ion-item>
    <ion-textarea  class="rounded" id="inputID" type="text" placeholder="Message" name="message"></ion-textarea>

    <ion-button slot="end" (click)="sendMesg()">
      <ion-icon slot="icon-only" name="send"></ion-icon>
    </ion-button>
  </ion-item>


</ion-footer>

TS 文件:

import { Component, OnInit, ViewChild, ElementRef , ViewChildren} from '@angular/core';
import { IonContent } from '@ionic/angular';
@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  //@ViewChild(IonContent,{read : ElementRef,static : false}) content: IonContent;
  @ViewChildren(IonContent) content: IonContent;
  //@ViewChildren('scrollElement',{read : ElementRef}) content: IonContent;

  dummyList:any;

  constructor() { 
    this.dummyList = [
      {
        value:"Esteban Gutmann IV",
      },{
        value:"Bernardo Prosacco Jr.",
      },{
        value:"Nicholaus Kulas PhD",
      },{
        value:"Jennie Feeney",
      }];
  }
  ngOnInit() {
    setTimeout(()=>{
      this.scrollDown();
    },1000)
  }
  logScrollStart(){
    console.log("logScrollStart : When Scroll Starts");
  }
  logScrolling(){
    console.log("logScrolling : When Scrolling");
  }
  logScrollEnd(){
    console.log("logScrollEnd : When Scroll Ends");
  }
  scrollDown(){
    this.content.scrollToBottom(1500);
  }
  sendMesg(){
    const data = {
      value:"Esteban Gutmann IV",
    };
    this.dummyList.push(data);
    setTimeout(()=>{
      this.scrollDown();
    },1000)
    //this.ScrollToBottom();
  }
}

离子信息


Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\krishna prasad\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v11.0.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.1.0
   OS     : Windows 10

scrollToBottom 方法出现在 VS code 的建议列表中，但在运行.[= 时以非 函数错误结束18=]

core.js:9110 ERROR TypeError: this.content.scrollToBottom is not a function at ChatPage.scrollDown (chat.page.ts:50) at chat.page.ts:32 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at invokeTask (zone-evergreen.js:465) at ZoneTask.invoke (zone-evergreen.js:454) at timer (zone-evergreen.js:2650) defaultErrorLogger @ core.js:9110 client:172 [WDS] Disconnected!

我正在用 ionic serve 测试这个。我错过了一些小东西，但没能抓住。请指点一下。我尝试使用 viewchild and viewchildren 属性，您可以在评论中注意到。

Answer 1

我从 Sampath 在

中的回答中得到了解决方案

自 2019 年 12 月 21 日起，这有效 @ViewChild('content', { static: false }) content: IonContent;

scrollToBottom 不是 ionic 4 中的函数

scrollToBottom is not a function in ionic 4

ionic-framework

angular

ionic4

angular7