Infinityscroll typescript / angular4

Question

我正在设置此angular4应用，从API获取数据。 我试图设置一个简单的无限滚动，它的工作，但初始页面内容加载两次。我如何避免这种情况被加载两次？ HTML部分只运行（滚动）=＆＃34; onScroll（）＆＃34;功能，所以我没有包括那个。 谢谢！

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函数也是一个好主意。