在angular4中实现可观察到的angular2-virtual-scroll

Question

I am trying to implement angular2-virtual-scroll in an angular4 project. Firstly, can anyone confirm if I would have a problem implementing it in NG4. I don't think I should and I haven't seen any notices to the contrary. Secondly I am using an observable instead of a promise shown in the NPM angular2-virtual-scroll docs. However, when I applied the virtual-scroll tag there is no change in my output...no scroll bar ..the data from the observable is displayed but no scrolling. The following are the relevant code segments:

Home.component.html

<h1 style="color: #76323f">
  {{title}}
</h1>

<h4>
  {{description}}
</h4>
<h2>Coming Soon....</h2>
<app-events-list [upcomingEvents]="upcomingEvents"></app-events-list>

home.component.ts

import {Component, OnInit,OnDestroy } from '@angular/core';
import {UpcomingEvent}       from './../../interface/upcomingevent';
import {EventService}        from './../../services/event.service';
import {Subscription}        from 'rxjs/Subscription';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit, OnDestroy {
  upcomingEvents: Array<UpcomingEvent>;
  title = 'Welcome....';
  description='Events promotions....';
  eventServiceSub: Subscription;

  constructor(private eventService: EventService){
    this.upcomingEvents = [];
  }

  ngOnInit() {
    this.eventServiceSub=this.eventService.getEvents().subscribe(upcomingEvents=>{this.upcomingEvents=upcomingEvents.slice(0,25);
    });
  }
  ngOnDestroy(){
    if (this.eventServiceSub){
      this.eventServiceSub.unsubscribe();
    }
  } 
}

event-list-component.html

    <virtual-scroll [items]="items" (update)="upcomingEvents = $event"
    (change)="onlistChange($event)">
     <app-upcomingevent *ngFor="let upcomingEvent of upcomingEvents"[upcomingEvent]="upcomingEvent" [eventItemCss]="'event-item'"></app-upcomingevent>
     <div *ngIf="loading" class="loader">Loading.....</div>
    </virtual-scroll>

event-list-component.ts

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { UpcomingEvent } from './../../interface/upcomingevent';
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';
import { ChangeEvent } from 'angular2-virtual-scroll';
import {EventService}        from './../../services/event.service';
import {Subscription}        from 'rxjs/Subscription';

@Component({
  selector: 'app-events-list',
  templateUrl: './events-list.component.html',
  styleUrls: ['./events-list.component.css'],
  animations: []
})
export class EventsListComponent implements OnInit, OnDestroy {


 @Input()
 upcomingEvents: Array<UpcomingEvent>;

 items=this.upcomingEvents;
 protected buffer: Array<UpcomingEvent> =[];
 protected loading: boolean;
 eventServiceSub: Subscription;


 constructor(private eventService: EventService) { 
    this.upcomingEvents=[];
 }

  ngOnInit() {
  }

  ngOnDestroy(){
    if (this.eventServiceSub){
      this.eventServiceSub.unsubscribe();
    }
  } 

  protected onlistChange(event: ChangeEvent){
    if (event.end !==this.buffer.length) return;
    this.loading=true;

    this.eventServiceSub=this.eventService.getEvents().subscribe(upcomingEvents=>{
         this.buffer=upcomingEvents.slice(this.buffer.length,25);
         this.loading=false;
      }, ()=> this.loading=false);
   }
 }

eventService.ts

import { Injectable } from '@angular/core';
import {UpcomingEvent} from './../interface/upcomingevent'
import {Http} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class EventService {

  constructor(private http: Http) { }

  getEvents(): Observable<UpcomingEvent[]>
  {
    return this.http
       .get(`https://jsonplaceholder.typicode.com/posts`)
       .map(response => response.json() as UpcomingEvent[]);

  }
}

upcomingEvents.html

<md-card [ngClass]="'event-item'">
  <h4 [ngClass]="'event-title'" [ngStyle]="{'color':'purple'}"> {{upcomingEvent.title}}</h4>    
   <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
   </md-card-actions>
</md-card>

upcomingEvents.component.ts

import { Component, Input,OnInit } from '@angular/core';
import { UpcomingEvent } from './../../interface/upcomingevent';
@Component({
  selector: 'app-upcomingevent',
  templateUrl: './upcomingevent.component.html',
  styleUrls: ['./upcomingevent.component.css']
})
export class UpcomingeventComponent implements OnInit {

 @Input()
 upcomingEvent: UpcomingEvent;

 @Input()
 eventItemCss: string;

  constructor() { }

  ngOnInit() {
    if (!this.upcomingEvent) {
     this.upcomingEvent=<UpcomingEvent> {}; 
     }

    }

}

The way it suppose to work is that the HomeComponent request data from the eventService via an observable..the data is then passed to the eventList component where it is iterated on and pass to the upcomingEvents component to present via HTML. 25 events are requested at first and if the user scroll to the end another 25 is requested from the eventService...this time by the upcomingEvents component. I am not sure this is the most efficient way to do it but in either case it doesn't work. The virtual-scroll seems to have no effect on the output....I would really appreciate someone showing me what I am doing wrong....Thanks

Answer 1

I think I see a problem in your code. When using virtual-scroll you need to keep two arrays - one for all loaded data, and one for currently rendered items. Looks like you kinda mixed them up.

Let's call all-items-array as items and render-array - upcomingEvents

First chunk of items will be passed from the parent component, hence:

Home.component.html

...
<app-events-list [items]="upcomingEvents"></app-events-list>

event-list-component.html looks good

event-list-component.ts

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { UpcomingEvent } from './../../interface/upcomingevent';
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';
import { ChangeEvent } from 'angular2-virtual-scroll';
import {EventService}        from './../../services/event.service';
import {Subscription}        from 'rxjs/Subscription';

@Component({
  selector: 'app-events-list',
  templateUrl: './events-list.component.html',
  styleUrls: ['./events-list.component.css'],
  animations: []
})
export class EventsListComponent implements OnInit, OnDestroy {


 @Input()
 items: Array<UpcomingEvent> = [];

 upcomingEvents: Array<UpcomingEvent>;

 protected loading: boolean;
 eventServiceSub: Subscription;


 constructor(private eventService: EventService) { 
    this.upcomingEvents=[];
 }

  ngOnInit() {
  }

  ngOnDestroy(){
    if (this.eventServiceSub){
      this.eventServiceSub.unsubscribe();
    }
  } 

  protected onlistChange(event: ChangeEvent){
    if (event.end !==this.items.length) return;
    this.loading=true;

    this.eventServiceSub=this.eventService.getEvents().subscribe(upcomingEvents=>{
         this.items=upcomingEvents.slice(0, this.items.length + 25);
         this.loading=false;
      }, ()=> this.loading=false);
   }
 }

warning! code not tested, I simply edited your code.