Javascript Angular nativeElement.scrollTop具有奇怪的行为

Javascript Angular nativeElement.scrollTop具有奇怪的行为,javascript,html,angular,typescript,ionic4,Javascript,Html,Angular,Typescript,Ionic4,你能告诉我为什么this.myScrollContainer.nativeElement.scrollTop没有得到this.myScrollContainer.nativeElement.scrollHeight的赋值吗?这里发生了什么 .ts .html Gif-单击可在大屏幕上查看 在访问本机DOM元素时,这似乎是一个错误。我已经完成了下面的工作,现在工作得非常好。i、 e.使用setTimeout() 我们可以看看您调用scrollToBottom的方式和位置吗?@ConnorsFan请

你能告诉我为什么
this.myScrollContainer.nativeElement.scrollTop
没有得到this.myScrollContainer.nativeElement.scrollHeight的赋值吗?这里发生了什么

.ts

.html

Gif-单击可在大屏幕上查看


在访问本机DOM元素时,这似乎是一个错误。我已经完成了下面的工作,现在工作得非常好。i、 e.使用
setTimeout()


我们可以看看您调用
scrollToBottom
的方式和位置吗?@ConnorsFan请参见上面gif上的第
161行。我的建议是:调用
ChangeDetectorRef.detectChanges()
在调用
scrollToBottom()之前更新视图
@ConnorsFan这对组件来说是不必要的开销,因为它将重新运行整个组件的更改检测。但是
setTimeout()
在这里更有效。
 @ViewChild('scrollMe', { static: false }) private myScrollContainer: ElementRef;

  scrollToBottom(): void {
     this.myScrollContainer.nativeElement.scrollTop =  this.myScrollContainer.nativeElement.scrollHeight;
   }
<div class="row2" #scrollMe>
      <ion-row>
        <ion-col>
          <app-school></app-school>
        </ion-col>
      </ion-row>
    </div>
.content {
    ion-grid {
        display: flex;
        flex-direction: column;
        height: 100% !important;
    }

    .row1 {
        flex: 2 !important;
    }

    .row2 {
        flex: 5 !important;
        overflow: scroll !important;
    }
}
scrollToBottom(): void {
   setTimeout(() => { this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight; }, 1);
  }