Angular2 ngIf dynamische Änderung

Question

Ich verwende *ngIf für ein Element

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

offsetTop die offsetTop des div *ngIf Zustand darstellen ist verpflichtet.

Was ich in der Komponente tun ist, ich die pageYOffset halten in der Variablen z

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

Es funktioniert, wenn Website geladen wird, aber wenn ich nach oben oder unten und Änderungswert von scrollTop Variable bleibt es gleich.

Wenn ich es richtig verstanden habe, ändert *ngIf Änderungen, wenn ScrollTop Variable ändert, sollte es erneut Bedingung bewerten, aber es ist nicht in meinem Fall.

Gibt es eine Lösung für mein Problem oder muss ich einen anderen Ansatz finden? Dank

Answer 1

Sie verwenden können:

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

oder

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