Infinityscroll tapuscrit/angular4

Question

Je configure cette application angular4, en obtenant des données d'une API. J'essaie de configurer un défilement infini facile, et son fonctionnement, mais le contenu initial est chargé deux fois. Comment puis-je éviter que cela soit chargé deux fois? La partie HTML exécute simplement la fonction (scrolled) = "onScroll()", donc je n'ai pas inclus cela. Merci!

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

peut-être quelque chose le long de ces lignes, en supprimant un code en double et verrouiller la fonction de défilement lorsque la propriété de la page est 0;

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> 

vous pouvez également (mais peut-être pas besoin de) ajouter une @Hostlistener sur la fonction onScrol comme ceci:

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

Edit: il pourrait aussi être C'est une bonne idée de verrouiller la fonction onScroll lorsqu'elle est déclenchée et qu'elle n'est pas chargée.