Angular2 RxJS分頁追加與切片

Question

我正在為Angular2建立一個數據表項目 。 我想使用rxjs對行進行分頁，但是當我對它進行分頁時，將其“附加”到行上。

我正在這樣做：

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

參考：src / services / State.ts＃L62

和Angular2在其上循環如下：

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

參考：src / components / body / Body.ts＃L18

獲取行數據並將其插入此處

這是RX的不好用例還是我做錯了什么？ 我在這里找到了一個類似的示例，但似乎無法使其與我的示例一起使用。

旁注：如果克隆並npm install / npm start，則此項目會運行 。

Answer 1

似乎您正在處理行，好像它是數組的可觀察對象，但是您正在對數組流而不是對流中的數組應用跳過/獲取運算符。 同樣，第一個/最后一個是可能的索引，而take操作符接受許多行。 建議：

1）如果this.rows實際上是一個行數組流，即smt，如Observable<Row[]> ，則重命名為this.rows $。

2）分頁方法應返回一個可觀察到的數組，按跳過/獲取或按切片進行切片：

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

請注意，如果在流上應用跳過/獲取運算符，則實際上是在等待第[SKIP]個發射，並且僅對第[TAKE]個隨后的發射保持流打開，其中每個發射都是行陣列。

發布完整的代碼示例以獲取進一步的指導。