窗口的角度宿主侦听器：滚动触发两次；发生了什么事？

Question

因此，我试图设置表头的位置，以使其与最初构建页面时（水平）的位置相匹配，以使其与向下滚动时它们在页面顶部的固定位置栏中的位置相匹配。 / p>

我的策略是在ngAfterViewInit中获取每个<th>的offsetLeft属性，保存它们，然后稍后使用它们设置每个位于固定栏中并移出上下文的显式的左侧位置表的位置（否则该位置会折叠）。

表具有以下结构：

<table>
    <thead [class.header-fixed]="isFixed" id="my-header">
        <tr>
            <th scope="col"><span>column title</span></th>

所以在组件顶部，我有：

private headerItems: number[] = [];
private fixedPosition: number; //set dynamically but can be set explicitly
public isFixed = false;

这是ngAfterViewInit（）：

ngAfterViewInit(){
    ...
    let header = document.getElementById('my-header');
    for (var i = 0; i < header.children[0].children.length; i++) {
        let headerItem = <HTMLElement> header.children[0].children[i]; 
        this.headerItems.push(headerItem.offsetLeft);
    }
    ...
}

并捕获滚动条：

@HostListener("window:scroll", ['$event']) onScroll($event) {

    const documentScrollTop = this.document.documentElement.scrollTop;
    let header = document.getElementById('my-header');
    ...
    if ((documentScrollTop > this.fixedPosition) && (!this.isFixed)) {
        this.isFixed = true;
        for (var i = 0; i < header.children[0].children.length; i++) {
            let headerItem = <HTMLElement> header.children[0].children[i];
            headerItem.style.left = this.headerItems[i].toString();
        }
    } else if ((this.isFixed) && (documentScrollTop < this.fixedPosition)) {
        this.isFixed = false;
    }
    ...
}

虽然这不是特别烦人，但我认为这不是问题的根源。这样做的目的是一次抓住左侧位置，然后在必要时稍后重复使用它们（有一些响应性影响，但是我现在不担心）。

因此本质上，当我运行此代码时，发生的情况是，对于每个滚动的像素，事件都会触发两次，并且代码运行两次。这两个事件看起来完全相同，并且时间戳完全相同。这并不一定是问题（有点奇怪），但是headerItems的内容却奇怪地不同。在第一个事件中，所有值均为0。在第二个事件中，它们是正确的。为什么只设置一次它们会发生这种情况？实际上，headerItems最初是一个没有长度的空数组，因此永远不要用0填充。当我检查this时，只有一个headerItems数组，因此不会以某种方式重复。

我尝试仅在数组中的最后一项具有大于1的值时设置左定位（因此仅在值正确时设置，但感觉像是完全破解），但这并没有工作，我不知道为什么不这样做。我没有任何错误。

这到底是怎么回事？