Zugriff auf ngFor für lokale Variable außerhalb des Kontexts

Question

Ich versuche eine Schaltfläche "loadmore" zu zeigen, wenn der letzte Kommentar mit der lokalen Variablen index angezeigt wird, aber standardmäßig ist diese Variable auf die ngFor-Direktive beschränkt.

Es ist möglich, es außerhalb des Kontextes verfügbar zu machen?

<div *ngFor="let comment of comments; let i = index"> 
    <comment></comment> 
</div> 

<div *ngIf="comments.length === i"> <!-- The i variable is unknown --> 
    <button>Load more comments</button> 
</div> 

Answer 1

Zeigen Sie den "mehr laden" -Link immer unter der Kommentarliste.

Dies ist der Standardweg. Der Link wird sichtbar, wenn der Benutzer unterhalb des letzten Kommentars scrollt. keine Notwendigkeit für ein * ngIf.

Component HTML:

<div *ngFor="let comment of comments"> 
    <comment></comment> 
</div> 
<button (click)="loadMoreComments()">Load more comments</button> 

Komponente TS:

loadMoreComments() { 
    let offset = comments.length; 
    // Request more comments starting from offset 
} 

Hybrid scroll

Wenn Sie die automatische unendliche Scrollen kombinieren und lassen den Anwender die Fußzeile finden, können Sie Machen Sie dasselbe wie Instagram im Web. Sie verlangen, dass Sie einmal auf "Mehr laden" klicken, aber danach wird es automatisch jedes Mal ausgelöst, wenn der Benutzer so weit scrollt, dass er sichtbar wird. Die Fußzeile ist erreichbar, bevor die Taste das erste Mal gedrückt wird.

Beispiel: https://www.instagram.com/soturidesign/