rxjs take operator - 使用异步管道限制结果

Question

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

api http://jsonplaceholder.typicode.com/users returns 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)))

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

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

要达到预期的结果（获取传入数组的前四个元素），您必须使用 rxjs map 运算符才能 修改传入的 http 结果，如图所示。

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

rxjs take operator - 使用异步管道限制结果

rxjs take operator - to limit results with async pipe

rxjs

angular

angular-observable

angular-httpclient

rxjs6