Infinityscroll typescript/angular4

Question

我正在設置這個angular4應用程序，從API獲取數據。 我試圖設置一個簡單的無限滾動，其工作，但最初的pagecontent被加載兩次。我如何避免這兩次被加載？ HTML部分只是運行（滾動）=「onScroll（）」函數，所以我沒有包含它。 謝謝！

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

或許真的沿着這些線路，去掉一些重複代碼，在頁面屬性爲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> 

你也可以（但不一定需要）在onScrol功能添加@Hostlistener像這樣：

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

編輯：這也可能是在觸發未鎖定onScroll函數的同時鎖定onScroll函數是一個好主意。