title: Angular2 RxJS Pagination appending vs slicing
body: <p>I'm building a <a href="https://github.com/swimlane/angular2-data-table" rel="nofollow">datatable project</a> for Angular2. I want to page the rows using rxjs but when I page it 'appends' to the rows versus slicing it.</p>
  
  <p>I'm doing it like this:</p>
  
  <pre><code>get paginated() {
      let { first, last } = this.indexes;
      return this.rows
        .skip(first)
        .take(last)
        .toArray();
    }
  </code></pre>
  
  <p><a href="https://github.com/swimlane/angular2-data-table/blob/master/src/services/State.ts#L62" rel="nofollow">Reference: src/services/State.ts#L62</a></p>
  
  <p>and Angular2 loops on it like:</p>
  
  <pre><code>&lt;datatable-body-row
    *ngFor="let row of state.paginated | async"
    [row]="row"
    [state]="state"&gt;
  &lt;/datatable-body-row&gt;
  </code></pre>
  
  <p><a href="https://github.com/swimlane/angular2-data-table/blob/master/src/components/body/Body.ts#L18" rel="nofollow">Reference: src/components/body/Body.ts#L18</a></p>
  
  <p>the row data is fetched and <a href="https://github.com/swimlane/angular2-data-table/blob/master/src/main.ts#L47" rel="nofollow">inserted here</a></p>
  
  <p>Is this a bad use case for RX or am I just doing something wrong? I find a similar example <a href="http://plnkr.co/edit/x5H7nJRxNQtDnKrG9fZE?p=preview" rel="nofollow">here</a>, but can't seem to get it to work with my example. </p>
  
  <p><em>Side note: this project does run if you clone and npm install/npm start</em>.</p>