代码之家 › 专栏 › 技术社区 › pinale

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

angular-observable rxjs6 angular-httpclient rxjs angular

0

pinale · 技术社区 · 7 年前

我不能使用rxjs take()操作符限制模板中显示的结果,模板总是显示所有记录。

API http://jsonplaceholder.typicode.com/users 返回10个元素,我只想取其中的4个。

[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>

1 回复 | 直到 7 年前

1

7

Ð¥ÑÐ¸ÑÑÐ¸ÑÐ½ Ð¥ÑÐ¸ÑÑÐ¾Ð² 7 年前

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

你的服务应该是这样的。

您使用的是RXJS take 接线员,先接 4响应 一条小溪。因此,在您的案例中,它将从服务器返回前四个响应(包括服务器的第一个响应,其中包含一个由10个元素组成的数组)。

要获得所需的结果(采用传入数组的前四个元素),必须使用RXJS map 操作员以便 修改传入 HTTP结果,如图所示。

换句话说 拿 统计发出的响应 从一条小溪 Dosen不修改流数据 本身。