angular - rxjs 带运算符 - 使用异步管道限制结果

Question

我无法使用 rxjs take() 运算符限制模板中显示的结果，模板总是向我显示所有记录。

api http://jsonplaceholder.typicode.com/users返回 10 个元素，我只想取其中的四个。

[service]
public getData(): Observable<User[]> {
    return this.http.get<User[]>(`http://jsonplaceholder.typicode.com/users`).pipe(
       take(4)
      );
  }

[component]
export class GridComponent implements OnInit {

  _data : Observable<User[]>;

  constructor(public _ds : DataService) {  
  }

  ngOnInit() {
    this._data = this._ds.getData();
  }
}

[template]
<tr *ngFor="let d of _data | async">
        <td>{{d.id}}</td>
        <td>{{d.name}}</td>
        <td>{{d.email}}</td>
        <td>{{d.phone}}</td>
</tr>

Answer 1

    return this.http.get<[any]>(`https://jsonplaceholder.typicode.com/users`).pipe(
      map(x => x.slice(0, 4)))

这就是您的服务应有的样子。

您正在使用 rxjstake运算符，它将获取流的前4 个响应。因此，在您的情况下，它将返回来自服务器的前四个响应（包括服务器的第一个响应，其中包含 10 个元素的数组）。

要获得所需的结果（获取传入数组的前四个元素），您必须使用 rxjsmap运算符来修改传入的http 结果，如图所示。

换句话说，计算从流take 中发出的响应并且不修改流数据本身。