[英]Angular2 RxJS Pagination appending vs slicing
I'm building a datatable project for Angular2. 我正在为Angular2建立一个数据表项目 。 I want to page the rows using rxjs but when I page it 'appends' to the rows versus slicing it.
我想使用rxjs对行进行分页,但是当我对它进行分页时,将其“附加”到行上。
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 参考:src / services / State.ts#L62
and Angular2 loops on it like: 和Angular2在其上循环如下:
<datatable-body-row
*ngFor="let row of state.paginated | async"
[row]="row"
[state]="state">
</datatable-body-row>
Reference: src/components/body/Body.ts#L18 参考: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? 这是RX的不好用例还是我做错了什么? 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 . 旁注:如果克隆并npm install / npm start,则此项目会运行 。
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.
同样,第一个/最后一个是可能的索引,而take操作符接受许多行。 Suggestion:
建议:
1) rename this.rows to this.rows$ if it really is a stream of row arrays, ie smt like Observable<Row[]>
. 1)如果this.rows实际上是一个行数组流,即smt,如
Observable<Row[]>
,则重命名为this.rows $。
2) paginated method should return an observable array, sliced by skip/take or by slice: 2)分页方法应返回一个可观察到的数组,按跳过/获取或按切片进行切片:
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. 请注意,如果在流上应用跳过/获取运算符,则实际上是在等待第[SKIP]个发射,并且仅对第[TAKE]个随后的发射保持流打开,其中每个发射都是行阵列。
Post a complete code example for further guidance. 发布完整的代码示例以获取进一步的指导。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.