Should the Rxjs 6 filter operator work on the retu

2019-07-28 08:20发布

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?

标签: angular rxjs6
0条回答
登录 后发表回答