scrollHeight的值不确定吗？

Question

我是Angular的新手，想实现 Infinite Scroll ，但是我的scrollHeight的值未定义。我正在使用ElementRef中的@angular/core这是我的代码。

@Input() eachElementHeightInPx = 20;
@Input() fetchThreshold = 5;
private element: HTMLElement = this.elementRef.nativeElement;

constructor(private elementRef: ElementRef) { }

@HostListener('scroll', ['$event'])
onScrollContainer($event: any) {
    console.log('scrollContainer');
    console.log('scrollHeight ' + this.element.scrollHeight); // it is undefined idk why!!.
    console.log(typeof (this.element[0]));
    if (this.element.scrollHeight > this.lastCheckedHeight) {
        this.previousScrollHeight = this.element.scrollHeight;
        let remainingHeight = this.element.scrollHeight -
            (this.element.offsetHeight + this.element.scrollTop);
        let remainingElement = Math.ceil(remainingHeight /
            this.eachElementHeightInPx);
        if (remainingElement < this.fetchThreshold) {
            this.lastCheckedHeight = this.element.scrollHeight;
            // this.fetchMore.emit();
            console.log('emitting');
        }
    } else if (this.element.scrollHeight < this.previousScrollHeight) { // To check if the list is reloaded
        this.previousScrollHeight = this.element.scrollHeight;
        this.lastCheckedHeight = 0;
        this.element.scrollTop = 0; // Scroll the list to top
    }
}

这是我的函数快照，以防万一上面的代码不引起混淆。 Click Here。 请说明不包括jQuery 的方法。谢谢。

更新：复制副本非常简单 https://stackblitz.com/edit/angular-qngk3b