Typescript 将Div滚动到底部

我有一个ionic页面，其中有一个可滚动的div

<div #list class="main">
    <div class="row-container" *ngFor="let log of logs">
        <p class="log">{{log.guess}}  -  {{log.result}}</p>
        <div class="score-container">
            <ion-icon name="star" style="color: gold;"></ion-icon>
            <p class="score">{{log.score}}</p>
        </div>
    </div>
</div>

我想在页面加载时以及在列表中添加新项目时自动滚动到div的底部

到目前为止，我已经尝试使用

@ViewChild（'list'）list:any以获取元素。然后：

this.list.scrollTop = this.list.scrollHeight;

及

但是
scrollTop
就是不起作用
scrollToBottom
抛出一个错误，指出scrollToBottom不是函数

如何滚动到div的底部？
尝试将[scrollTop]添加到模板侧。我发现它更容易实现

<div #list class="main" [scrollTop]="list.scrollHeight">
<div class="row-container" *ngFor="let log of logs">
    <p class="log">{{log.guess}}  -  {{log.result}}</p>
    <div class="score-container">
        <ion-icon name="star" style="color: gold;"></ion-icon>
        <p class="score">{{log.score}}</p>
    </div>
</div>


{{log.guess}-{{log.result}
{{log.score}

尝试将[scrollTop]添加到模板侧。我发现它更容易实现

<div #list class="main" [scrollTop]="list.scrollHeight">
<div class="row-container" *ngFor="let log of logs">
    <p class="log">{{log.guess}}  -  {{log.result}}</p>
    <div class="score-container">
        <ion-icon name="star" style="color: gold;"></ion-icon>
        <p class="score">{{log.score}}</p>
    </div>
</div>


{{log.guess}-{{log.result}
{{log.score}

el.scrollTop=el.scrollHeight；如果可以的话，你有什么错误吗？您的元素（列表）类型正确吗？列表应该是一个HTMLElement，以使这些属性可用。我记录了列表项，结果是：
ElementRef{nativeElement:div.main，scrollTop:undefined}
尝试将其转换为HTMLElement。我更改了
@ViewChild（'list'）列表：任意
到
@ViewChild（'list'）列表：HTMLElement。没有变化el.scrollTop=el.scrollHeight；如果可以的话，你有什么错误吗？您的元素（列表）类型正确吗？列表应该是一个HTMLElement，以使这些属性可用。我记录了列表项，结果是：
ElementRef{nativeElement:div.main，scrollTop:undefined}
尝试将其转换为HTMLElement。我更改了
@ViewChild（'list'）列表：任意
到
@ViewChild（'list'）列表：HTMLElement。没有变化
<div #list class="main" [scrollTop]="list.scrollHeight">
<div class="row-container" *ngFor="let log of logs">
    <p class="log">{{log.guess}}  -  {{log.result}}</p>
    <div class="score-container">
        <ion-icon name="star" style="color: gold;"></ion-icon>
        <p class="score">{{log.score}}</p>
    </div>
</div>