如何使用 Skip and Take with RxJs Observable

Question

我正在学习Angular 2，TypeScript，RxJs等，并且在使用RxJs和Observable的服务中返回数据子集时遇到问题。

我希望下面的 getCars 函数读取一个 json 文件，解析它并返回一部分数据（偏移量和计数）。但是，我总是取回所有数据（我正在测试的文件中有 200 个实体/汽车）。

我做错了什么？

实体服务

@Injectable()
export class EntityService {
  constructor(private http: Http) { }
  getCars(offset: number, count: number): Observable<Car[]> {
     return this.http
      .get('resources/data/cars.json')   
      .map(this.extractData)
      .skip(offset)
      .take(count)
      .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || {};
  }
  private handleError(error: any) {
    // ...
  }
}

汽车.json

    {
        "data":[
            {
                "vin":"ee8a89d8",
                "brand":"Fiat",
                "year":1987,
                "color":"Maroon"
            },
            {
                "vin":"642b3edc",
                "brand":"Renault",
                "year":1968,
                "color":"White"
            }
    ]
}

Answer 1

事实上，您将始终使用它加载所有数据。仅当数据流中收到多个事件时，skip运算符和take运算符才适用：

• 跳过：跳过多个事件
• 采取：仅考虑指定数量的事件

在您的情况下（HTTP 请求），您只有一个：当您获取数据时。因此，如果要过滤数据，则需要使用另一个map运算符。像这样：

getCars(offset: number, count: number): Observable<Car[]> {
  return this.http
    .get('resources/data/cars.json')   
    .map(this.extractData)
    .map(data => {
      return data.slice(offset, offset + count); // <----
    })
    .catch(this.handleError);
}