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]个随后的发射保持流打开，其中每个发射都是行阵列。

发布完整的代码示例以获取进一步的指导。