Unter Verwendung der ersten () - operator auf eine beobachtbare, um das erste element

Wenn Sie .map(), das argument ist der Typ des Observable.

Da die, die Sie in Ihrem Dienst eine Observable<Member[]>, dann processArray im

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

ist ein array - eine Member[].

So, dass .filter() Sie anrufen Array#filter() nicht Observable#filter().

Auf die gleiche Weise die .first() Sie anrufen würde, wäre Array#first() nicht Observable#first().

Seit Array keinen .first() array, es ergibt einen Laufzeitfehler (siehe plunker).

Weiter zu gehen, wenn Sie rufen stattdessen .first() am Observable würden Sie nicht sehen, viel Unterschied, da es sich um eine Observable<Member[]>, wäre es das erste element, dass Observable ist die ganze array.

Lösungen:

Wenn Sie wirklich wollen, dass es weiterhin ein Observable<Member[]> und abrufen nur das erste Mitglied, das Sie tun konnte, ( siehe 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
})

Aber, was ich beraten Sie zu tun ist, um die beobachtbare in eine Observable<Member> (statt Observable<Member[]>). Sie können tun, dass mit .mergeMap()/.flatMap().

app/Mitglied.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-Liste.Komponente.ts -

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

Sehen final demo plunker hier.

InformationsquelleAutor acdcjunior