Angular2 RxJS Pagination appending vs slicing

Question

I'm building a datatable project for Angular2. I want to page the rows using rxjs but when I page it 'appends' to the rows versus slicing it.

I'm doing it like this:

get paginated() {
    let { first, last } = this.indexes;
    return this.rows
      .skip(first)
      .take(last)
      .toArray();
  }

Reference: src/services/State.ts#L62

and Angular2 loops on it like:

<datatable-body-row
  *ngFor="let row of state.paginated | async"
  [row]="row"
  [state]="state">
</datatable-body-row>

Reference: src/components/body/Body.ts#L18

the row data is fetched and inserted here

Is this a bad use case for RX or am I just doing something wrong? I find a similar example here , but can't seem to get it to work with my example.

Side note: this project does run if you clone and npm install/npm start .

Answer 1

It looks like you're working with rows as if it is an observable of an array, yet you are applying skip/take operators on the stream of arrays, not the arrays on the stream. Also first/last are likely indices, whereas the take operator accepts a number of rows. Suggestion:

1) rename this.rows to this.rows$ if it really is a stream of row arrays, ie smt like Observable<Row[]> .

2) paginated method should return an observable array, sliced by skip/take or by slice:

return this.rows$
  .map(rows => rows.slice(first, last))

Note, if you apply skip/take operators on stream, you are effectively awaiting the [SKIP]th emission and only keeping the stream open for [TAKE] subsequent emissions, where each emission is an array of rows.

Post a complete code example for further guidance.