在observable上使用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[]>，因此{/ 1}}为

processArray

是一个数组 - .map(processArray => { return processArray.filter(x=> x.type === "member") //.first() }) 。

因此，您呼叫的Member[]为.filter()而不是Array#filter()。

与您呼叫的Observable#filter()相同的方式是.first()而不是Array#first()。

由于Observable#first()没有Array数组，因此会产生运行时错误（see plunker）。

更进一步，如果你改为在.first()拨打.first()，你就不会发现太大的区别，因为它是Observable，它会得到Observable<Member[]>的第一个元素{ {1}}这是整个数组。

解决方案：

如果你真的希望它继续成为Observable并只检索第一个成员，你可以做（​​see plunker）：

Observable<Member[]>

虽然我建议你要做的是将观察结果转换为.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[]>。

执行此操作

应用程序/ member.service.ts

.mergeMap()/.flatMap()

应用程序/构件-list.component.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()

请参阅final demo plunker here。

Answer 2

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

ypurComponent.html

(yourObservable | async | slice :0:1)