I'm currently in the process of setting up an angular4 application, pulling data from an API. I'm working on implementing an easy infinite scroll feature, and while it's functioning properly, the initial page content is being loaded twice. How can I prevent this double loading issue? Since the HTML part simply triggers the (scrolled)="onScroll()" function, I have omitted that code snippet. Thank you!
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>Uploaded {{story.uploadDate}}</p>
<p>User: {{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>No more material available!</p>
</div>