Infinityscroll typescript/angular4

Question

Ich richte diese angular4 App ein und erhalte Daten von einer API. Ich versuche, eine einfache Unendlich Scroll einzurichten, und es funktioniert, aber der erste Seiteninhalt wird zweimal geladen. Wie verhindere ich, dass dieses zweimal geladen wird? Der HTML-Teil führt nur die Funktion (scrolled) = "onScroll()" aus, also habe ich das nicht mit einbezogen. Danke!

discover.component.ts:

export class DiscoverComponent implements OnInit { 
    stories: any; 
    resultHits: Array<Object>; 
    page:any; 
    feed:any; 
    hits:string; 

    constructor(private storiesService: StoriesService) {} 


    ngOnInit() { 
    } 

    getLatestFeed() { 
    this.page = 0; 
    this.feed = 'latest'; 
    this.hits = '6'; 
    console.log("latest feed"); 
    this.getFeed(this.page, this.feed, this.hits); 
    } 

    getCuratedFeed() { 
    this.page = 0; 
    this.feed = 'curated'; 
    this.hits = '6'; 
    this.getFeed(this.page, this.feed, this.hits); 
    console.log("curated feed"); 
    } 

    getTrendingFeed() { 
    this.page = 0; 
    this.feed = 'trending'; 
    this.hits = '6'; 
    this.getFeed(this.page, this.feed, this.hits); 
    console.log("trending feed"); 
    } 

    onScroll() { 
    this.getMore(this.page, this.feed, this.hits); 
    } 

    //Get the latest feed 

    private getFeed(page, feed, hits) { 
    this.storiesService.getFeed(this.page, this.feed, this.hits).then((data) => { 
     this.stories = data; 
     this.stories = this.stories.hits; 
     this.resultHits = []; 
     for (var i = 0; i < this.stories.length; i++) { 
     console.log(this.stories[i]) 
     if (i < this.stories.length) { 
      this.resultHits.push(this.stories[i]); 
     } 
     } 
     console.log(this.stories); 
    }); 
    } 

    //Scroll 
    private getMore(page, feed, hits) { 
    this.storiesService.getFeed(this.page, this.feed, this.hits).then((data) => { 
     this.page++; 
     this.stories = data; 
     this.stories = this.stories.hits; 
     for (var i = 0; i < this.stories.length; i++) { 
     console.log(this.stories[i]) 
     if (i < this.stories.length) { 
      this.resultHits.push(this.stories[i]); 
     } 
     } 
     console.log(this.stories); 
    }); 
    } 
} 

stories.component.ts:

export class StoriesService implements OnInit { 

    private stories: any; 

    constructor(private http: HttpClient) { 

    } 

    ngOnInit() { } 

    //Get 6 latest story feeds 
    getFeed(page: any, feed: string, hits: string) { 

    let promise = new Promise((resolve, reject) => { 
     firebase.auth().currentUser.getIdToken(true).then((idToken) => { 
     let headers = new HttpHeaders() 
      .set('user_token', idToken); 
     let params = new HttpParams() 
      .set('page', page) 
      .set('feed', feed) 
      .set('hits', hits) 
     console.log(params); 
     this.http.get('https://dev-api.byrd.news/v1/stories', { params, headers }) 
      .toPromise() 
      .then(data => { 
      resolve(data); 
      }) 
     }, error => { 
     reject(error); 
     }) 
    }) 
    return promise; 
    } 

HTML:

<app-top-nav></app-top-nav> 


<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <li class="navbar-right"><a (click)="getCuratedFeed()">Curated</a></li> 
    <li class="navbar-right"><a (click)="getTrendingFeed()">Trending</a></li> 
    <li class="navbar-right"><a (click)="getLatestFeed()">Latest</a></li> 

    <li class="navbar-right"><a routerLink="/map" routerLinkAcive="active">Map</a></li> 

    </div> 
</nav> 

<h1>DiscoverComponent</h1> 



<h2> {{feed}} </h2> 
<div class="row"> 
    <div class="col-4 col-md-4 col-sm-12" *ngFor="let story of resultHits"> 
    <div class="thumbnail"> 
     <img *ngIf="story.storyMediaType === 'image'" class="img-fluid" src="{{story.storyThumbnailImage}}" /> 
     <div class="caption"> 
     <p>{{story.storyCity}}, {{story.storyCountry}}</p> 
     <h3>{{story.storyHeadline}}</h3> 
     <p>Uploadet {{story.uploadDate}}</p> 
     <p>Bruger: {{story.userDisplayName}}</p> 
     <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
     </div> 
    </div> 
    </div> 
</div> 

<hr> 

<div infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="1000" (scrolled)="onScroll()"> 

</div> 

<div class="notification is-warning" *ngIf="finished"> 
    <p>Ikke mere materiale!</p> 
</div> 

Answer 1

vielleicht etwas in dieser Richtung, einige doppelten Code zu entfernen und Sperren der Bildlauffunktion, während die Seiteneigenschaft 0 ist;

export class DiscoverComponent { 
    stories: any; 
    resultHits: Array<Object>; 
    page:any = 0; 
    feed:any; 
    hits:string; 

    constructor(private storiesService: StoriesService) {} 

    getInitialFeed(feed) { 
     this.getFeed(0, feed, '6'); 
     this.page = 1; 
    } 

    onScroll() { 
     if(this.page > 0) { 
      this.getFeed(this.page, this.feed, this.hits); 
     } 
    } 

    private getFeed(page, feed, hits) { 
     this.storiesService.getFeed(page, feed, hits).then((data) => { 
      this.stories = data; 
      this.stories = this.stories.hits; 
      this.resultHits = []; 
      for (var i = 0; i < this.stories.length; i++) { 
       this.resultHits.push(this.stories[i]);    
      } 
     }); 
     if(page > 0) this.page++; 
    } 
} 

Html:

<li class="navbar-right"><a (click)="getInitialFeed('curated')">Curated</a></li> 
<li class="navbar-right"><a (click)="getInitialFeed('trending')">Trending</a></li> 
<li class="navbar-right"><a (click)="getInitialFeed('latest')">Latest</a></li> 

Sie können auch (aber vielleicht nicht müssen), wie so einen @Hostlistener auf der onScrol Funktion hinzufügen:

import { Component, HostListener} from "@angular/core"; 
.. 
@HostListener("window:scroll") 
    onScroll() { 
     if(this.page > 0) { 
      this.getFeed(this.page, this.feed, this.hits); 
     } 
    } 

Edit: es auch sein könnte eine gute Idee, die onScroll-Funktion zu sperren, während sie ausgelöst und nicht geladen wird.