Question

我试图在下面的链接的帮助下使用RxJS实现Angular Infinite Scroller。

https://github.com/ashwin-sureshkumar/angular-infinite-scroller

Alt Link：

https://codeburst.io/angular-2-simple-infinite-scroller-directive-with-rxjs-observables-a989b12d4fb1

以下是我整合到项目中的方式。

更新：错误日志指向的文件

应用\部件\布局\顺序发出\无限scroller.directive.ts

 private requestCallbackOnScroll() {
this.requestOnScroll$ = this.userScrolledDown$;

if (this.immediateCallback) {
  this.requestOnScroll$ = this.requestOnScroll$
    .startWith([DEFAULT_SCROLL_POSITION, DEFAULT_SCROLL_POSITION]);
}

this.requestOnScroll$
  .exhaustMap(() => {
    return this.scrollCallback();
  })
  .subscribe((data) => { console.log(data) }, (err) => console.log(err));
}

应用\部件\布局\顺序发出\订单issue.module.ts

import { InfiniteScrollerDirective } from './infinite-scroller.directive';
...
declarations: [OrderIssueComponent,...],

应用\部件\布局\顺序发出\订单issue.component.ts

import { InfiniteScrollerDirective } from './infinite-scroller.directive';
import { OrderService } from "../../../services/order.services";

export class OrderIssueComponent implements OnInit {

 currentPage: number = 1;
 news: Array<any> = [];
 scrollCallback;

constructor(private orderService: OrderService) {
      this.scrollCallback = this.getStories();
  }

 getStories() {
   console.log('Got stories...')
    return this.orderService.getAllOrders_infinite_scroll("Pending",this.currentPage).subscribe(this.processData);
  }

   private processData = (news) => {
    console.log("process data");
    this.news = news.Allorders.concat(news.Allorders);
    console.log(this.news);
   }
}

更新：

\应用\服务\ order.services.ts

 getAllOrders_infinite_scroll(status,page: number = 1): Observable<any> {  //updated line
    console.log('adadasd')
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.http.post(`${BASE_URL}/orders/getAllOrdersWithItems`, { status: status }, { headers: headers })
   .map(res => res.json());
  }

问题在这里：

应用\部件\布局\顺序发出\订单issue.component.html

  <ul id="infinite-scroller" appInfiniteScroller scrollPerecnt="70" [immediateCallback]="true" [scrollCallback]="scrollCallback">
         <div *ngFor="let orders of news" class="col-md-4 col-sm-4 col-xs-12">
               <div class="panel panel-default">
                    <div class="panel-heading text-center">
                         <h4>{{news.Allorders.orderNo}}</h4>
                            <h6>{{news.Allorders.user_id.username}}</h6>
                    </div>
               </div>
               ....
          </div>
   </ul>

更新日志：已将日志设置为跟踪流程

如果我使用＆＃39;新闻订单，我就不会得到任何观点。

尝试使用news.orderNo

以下是控制台错误跟踪：

TypeError：_this.scrollCallback不是函数在SwitchFirstMapSubscriber.project（infinite-scroller.directive.ts：86）在SwitchFirstMapSubscriber.webpackJsonp ... / .. / .. / .. / rxjs / operator / exhaustMap.js.SwitchFirstMapSubscriber.tryNext（exhaustMap.js：93）在SwitchFirstMapSubscriber.webpackJsonp ... / .. / .. / .. / rxjs / operator / exhaustMap.js.SwitchFirstMapSubscriber._next（exhaustMap.js：86）在SwitchFirstMapSubscriber.webpackJsonp ... / .. / .. / .. / rxjs / Subscriber.js.Subscriber.next（Subscriber.js：89）在MergeAllSubscriber.webpackJsonp ... / .. / .. / .. / rxjs / OuterSubscriber.js.OuterSubscriber.notifyNext（OuterSubscriber.js：19）在InnerSubscriber.webpackJsonp ... / .. / .. / .. / rxjs / InnerSubscriber.js.InnerSubscriber._next（InnerSubscriber.js：23）在InnerSubscriber.webpackJsonp ... / .. / .. / .. / rxjs / Subscriber.js.Subscriber.next（Subscriber.js：89）在Object.subscribeToResult（subscribeToResult.js：17）

Answer 1

在order.services.ts＆gt;中getAllOrders_infinite_scroll函数如果你没有返回一个可观察到的观察结果，你将需要返回一个可观察的函数，而不是你能够订阅它。也许这就是你没有收到任何回调的原因。

喜欢这个......

getAllOrders_infinite_scroll(status,page: number = 1): Observable<any> {
   // your code
  }

此外，这条线也会改变

this.orderService.getAllOrders_infinite_scroll("Pending",this.currentPage).subscribe(res => this.processData = res);

通过使用您不再需要map(res => res.json()) more info here

Angular 2 Infinite Scroll模块this.scrollCallback不是函数

1 个答案: