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)
  }
}

Angular2 ngIf动态变化

1 个答案: