Should the Rxjs 6 filter operator work on the return from a map operator?

问题

I had the following function:

Original Function

public FindCertType(CertTypeID: string) : Observable<ICertType> {
    console.log("... FindCertType in Model-tools.service called ...");
    return this.GetCertTypes()
      .pipe(
        map((CertTypeMap: IResponseObject<ICertType>) => {
          return CertTypeMap.Array
        }),
        filter((CertType: ICertType ) => CertType.Id === CertTypeID)[0]
      )
  }

This code resulted in the following error:

Console Error

... ShowCertType called ...                           new-bcaba.component.ts:27 
... GetCertType in Certification Component called ... certification.component.ts:49
... FindCertType in Model-tools.service called ...                  model-tools.service.ts:53
... GetCertTypes in Model-tools.service called ...                  model-tools.service.ts:48

ERROR TypeError: fn is not a function                  NewBcabaComponent.html:3
    at pipe.js:18
    at Array.reduce (<anonymous>)
    at piped (pipe.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.pipe (Observable.js:91)
    at ModelToolsService.push../src/app/_services/model-tools.service.ts.ModelToolsService.FindCertType (model-tools.service.ts:55)
    at NewBcabaComponent.push../src/app/certification/certification.component.ts.CertificationComponent.GetCertType (certification.component.ts:50)
    at NewBcabaComponent.get [as BaseCertType$] (certification.component.ts:54)
    at NewBcabaComponent.push../src/app/certification/application/new-bcaba/new-bcaba.component.ts.NewBcabaComponent.ShowCertType (new-bcaba.component.ts:28)
    at NewBcabaComponent.get [as ParentCertType$] (new-bcaba.component.ts:37)
    at Object.eval [as updateDirectives] (NewBcabaComponent.html:3)

When I modified the function to put the filter inline with the map the error went away and it started working as I expected.

Modified Function

public FindCertType(CertTypeID: string) : Observable<ICertType> {
    console.log("... FindCertType in Model-tools.service called ...");
    return this.GetCertTypes()
      .pipe(
        map((CertTypeMap: IResponseObject<ICertType>) => {
          return CertTypeMap.Array.filter(CertType => CertType.Id === CertTypeID)[0];
        })
      )
  }

While my problem was solved with the modification I don't understand why this works but the first version doesn't. I was importing the "filter" and "map" operators from 'rxjs/operators' for the original code and as I understand the operators inside pipe should work on the returning observable from the previous operator so filter should work on the return of map. Can anyone explain why that doesn't work?

来源：https://stackoverflow.com/questions/56116454/should-the-rxjs-6-filter-operator-work-on-the-return-from-a-map-operator

标签

angular

rxjs6