在observable上使用first()运算符来获取第一个元素

Question

我有点新RxJS,在这个普拉克 我试图在数组中返回第一个成员,我已经试过了first()运营商,但它没有返回值:

var one = this.http.get(this.memberUrl)
  .map( this.extractData )
  .map(processArray => {
  return processArray.filter(x=> x.type === "member")
  //.first()
  })

注释行的错误是什么app/member.service.ts？

Answer 1

当你使用时.map(),它的参数是的类型Observable.

因为你服务中的Observable<Member[]>那个是a ,然后processArray是

.map(processArray => {
   return processArray.filter(x=> x.type === "member")
   //.first()
})

是一个数组 - 一个Member[].

因此,.filter()你打电话Array#filter()不是Observable#filter().

同样的方式,.first()你会打电话会Array#first()不会Observable#first().

由于Array没有.first()数组,因此会产生运行时错误(请参阅plunker).

去进一步,如果改为调用.first()的Observable,你不会看到太大的区别,因为它是一个Observable<Member[]>,它会得到的第一要素Observable是整个阵列.

解决方案:

如果你真的希望它继续作为一个Observable<Member[]>并只检索第一个成员,你可以做(参见plunker):

.map(processArray => {
  console.log('pa2', typeof processArray);
  return [ processArray.filter(x=> x.type === "member")[0] ] // <-- [0] to get first item
                                    // wrap the result in [ ]s, because it expects an array
})

虽然我建议你做的是将observable变成Observable<Member>(而不是Observable<Member[]>).你可以使用.mergeMap()/.flatMap().

应用程序/ member.service.ts

import 'rxjs/add/operator/mergeMap'; // <------------------ add this import

getMembers (): Observable<Member> { // <----------- changed from Member[] to Member
  var one = this.http.get(this.memberUrl)
    .map( this.extractData )
    .mergeMap(processArray => {  // <----------------- map to mergeMap
      return processArray.filter(x=> x.type === "member")
    }).first()                   // <----------------------- now you can use .first()

应用程序/构件-list.component.ts

import 'rxjs/add/operator/toArray'; // <------------------ add this import
...
getMembers() {
  this.memberService.getMembers().toArray() // <-------------- add .toArray()
                 .subscribe(

在这里查看最终演示plunker.

Answer 2

我能够通过使用 angular 的异步管道访问 Observable 的第一个成员。

ypurComponent.html

(yourObservable | async | slice :0:1)