angular - 在可观察对象上使用 first() 运算符来获取第一个元素

Question

我是 RxJS 的新手，在这个 plunk 我正在尝试返回数组中的第一个成员，我尝试了 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[]> , 然后 processArray在

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

是一个数组 - Member[] .

因此.filter()您调用的电话是Array#filter()不是 Observable#filter() .

与.first() 相同你会调用 Array#first()不是 Observable#first() .

自 Array没有 .first()数组，它会产生运行时错误 ( see plunker )。

---

更进一步，如果您改为调用 .first()在 Observable ，你不会看到太大的区别，因为它是一个 Observable<Member[]> , 它会得到那个 Observable 的第一个元素这是整个数组。

---

解决方案:

如果你真的想让它一直是 Observable<Member[]>并仅检索第一个成员，您可以这样做 ( see 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<Member> (而不是 Observable<Member[]> )。您可以使用 .mergeMap()/.flatMap() 来做到这一点.

app/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()

app/member-list.component.ts

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

参见 final demo plunker here .