Angular2 ng如果动态变化

Question

我正在使用*ngIf作为元素

<div *ngFor="let el of elemenets>
  <div *ngIf="el.offsetTop < scrollTop">
         ....
  </div>
</div>

offsetTop表示div *ngIf条件绑定到的offsetTop。

我在组件中所做的是将pageYOffset保留在变量中，例如

class Test implements onInit{
  scrollTop:number = 0;
  ngOnInit{
    window.addEventListener('scroll',function(){
        this.scrollTop = window.pageYOffset;
        console.log(this.scrollTop)
    },true)
  }
}

它在网站加载时有效，但是当我向上或向下滚动并更改scrollTop变量的值时，它保持不变。

如果我正确理解，则*ngIf监视发生更改，因此当scrollTop变量更改时，它应该再次评估条件，但在我的情况下不执行。

是否可以解决我的问题，还是必须找到其他方法？ 谢谢

Answer 1

您可以使用：

@HostListener('window:scroll)
scrollHandler(event) {
  this.scrollTop = window.pageYOffset;
   console.log(this.scrollTop)
}

要么

class Test implements onInit{
  scrollTop:number = 0;
  ngOnInit{
    window.addEventListener('scroll',() => { // <== changed to arrow function to keep `.this`
        this.scrollTop = window.pageYOffset;
        console.log(this.scrollTop)
    },true)
  }
}