Question

我想设置一个无限滚动。我通过Observable获取来自API的数据get req。如果我有第0页，我会得到第一页内容。第1页是第二页内容，依此类推。

该程序正在执行+1，但内容并未加载内容。我想要页面内容为＆＃34; stack＆＃34;本身，所以你滚动得越远，你得到0页然后0,1然后0,1,2等等。

我知道这可能应该在一个数组中，但对于RxJs Observable来说我是相当新的，所以也许你们对这个无限滚动问题有建议吗？

组件：

export class DiscoverComponent implements OnInit {

  data: Array<Object> = [];
  stories: any;
  storiesArray: Array<Object> = [];

  page: any = 0;
  feed: any;
  hits: any = '6';

  notLoaded: boolean = false;

  constructor(private storiesService: StoriesService, private route: ActivatedRoute, private router: Router) {
  }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        this.feed = params['feed'];
      }
    );
    this.feed = this.route.snapshot.params['feed'];
    this.getStories(this.page, this.hits, this.feed)
  }

  getStories(page, hits, feed) {
    feed = this.route.snapshot.params['feed'];
    this.storiesService.getData(this.page, this.hits, this.feed)
      .subscribe(
      (data) => {
        console.log(data);
        if (!data) {
          this.notLoaded = true;
        } else {
          for (let story in data) {
            this.data = data;
            if (this.data.length < this.storiesArray.length) {
              this.page++;
              this.storiesArray.push(this.data);
            }
          }
        }
      })
    console.log("side: " + this.page)
  }

  getInitialFeed(feed) {
    this.feed = feed;
    this.data = [];
    this.getStories(0, this.feed, '6');
  }

  onScroll() {
    console.log("Scrolling!")
    this.scrollStories()
  }

  private scrollStories() {
    if (this.page > 0) {
      console.log(this.page)
      this.getStories(this.page, this.hits, this.feed);
    }
  }
}

HTML：

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


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <li class="navbar-right"><a routerLink="/discover/curated" routerLinkActive="active" (click)="getInitialFeed('curated')">Curated</a></li>
    <li class="navbar-right"><a routerLink="/discover/trending" routerLinkActive="active" (click)="getInitialFeed('trending')">Trending</a></li>
    <li class="navbar-right"><a routerLink="/discover/latest" routerLinkActive="active" (click)="getInitialFeed('latest')">Latest</a></li>
    <li class="navbar-right"><a routerLink="/map" routerLinkAcive="active">Map</a></li>
  </div>
</nav>

<h1>DiscoverComponent</h1>
<div>
  <h2> {{this.feed}} </h2>
</div>

<div class="row">
  <ng-container *ngIf="!notLoaded">
    <div class="col-4 col-md-4 col-sm-12" *ngFor="let story of data.hits">
      <div class="thumbnail">
        <img *ngIf="story.storyMediaType === 'image'" class="img-fluid" src="{{story.storyThumbnailImage}}" />
        <img *ngIf="story.storyMediaType === 'video'" class="img-fluid" src="{{story.storyThumbnailImage}}" width="150" height="94" />
        <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>
  </ng-container>
</div>

<hr>

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

</div>

<div  *ngIf="!finished">
  <p>Loader flere stories...</p>
</div>

<div  *ngIf="finished">
  <p>Ikke mere materiale!</p>
</div>

用于Observable中数据的无限滚动

0 个答案: