只获取 10 个值而不是全部 - Rxjs

问题描述 投票:0回答:2

我开始更详细地学习 Rxjs。我正在尝试不同的代码然后我有下面的代码期望只得到 10 条记录但令我惊讶的是,它是全部。

todos: Observable<TodoItem[]>;

constructor(private http: HttpServiceService) {
  this.todos = this.http.get('https://jsonplaceholder.typicode.com/todos');
  this.todos.pipe(
    map((todoList) => todoList.map(todo => ({ ...todo, id: todo.id + 10 }))),
    take(10)
  ).subscribe(val => console.log(val));
}

有人能解释一下为什么不用 10 条记录吗?我们怎样才能让它只获得 10 条记录?

提前谢谢你。

angular rxjs
2个回答
0
投票

在您的示例中,api 调用将返回一个数组。它将返回作为数组的单个值。在您的流中将有一个值(单个数组),然后流结束。

所以 take(10) 在你的情况下不会做任何事情。如果您的流有多个值,则 Take 运算符将起作用,然后您在流结束之前对进入“订阅”块的值的数量进行一些“限制”。

所以你的问题的解决方案与 rxjs 无关,它是基本的 js 数组操作。

你可以回来

todoList.map(todo => ({ ...todo, id: todo.id + 10 })).slice(0, 10)

0
投票

take
运算符从可观察对象中发出指定数量的值,然后完成。请在此处阅读有关 take 运算符的信息

在您的示例中,API 调用返回一个数组

获取前 10 条记录,您可以这样做

this.todos = this.http.get('https://jsonplaceholder.typicode.com/todos'); this.todos.pipe( map((todoList) => todoList.map(todo => ({ ...todo, id: todo.id + 10 }))), map((todoList) => todoList.slice(0, 10)) ) .subscribe(val => console.log(val));
    
© www.soinside.com 2019 - 2024. All rights reserved.