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 的建议列表中，但最终不是运行时出现函数错误。

core.js:9110 错误类型错误：this.content.scrollToBottom 不是 功能 在 ChatPage.scrollDown (chat.page.ts:50) 在 chat.page.ts:32 在 ZoneDelegate.invokeTask (zone-evergreen.js:391) 在 Object.onInvokeTask (core.js:34182) 在 ZoneDelegate.invokeTask (zone-evergreen.js:390) 在 Zone.runTask (zone-evergreen.js:168) 在 invokeTask (zone-evergreen.js:465) 在 ZoneTask.invoke (zone-evergreen.js:454) 在计时器 (zone-evergreen.js:2650) defaultErrorLogger @ core.js:9110 client:172 [WDS] 断开连接！

我正在使用ionic serve 进行测试。我错过了一些小但无法抓住的东西。请指点一下。我尝试使用 viewchild and viewchildren 属性，您可以在 cmets 中注意到。

Answer 1

我从 Sampath 在this link 的回答中得到了解决方案

截至 2019 年 12 月 21 日，这工作 @ViewChild('content', { static: false }) content: IonContent;