JavaScript rxjs 过滤器在返回 Observable 时不起作用

Question

I am using Angular 9. I am trying to filter values in an Observable, however it is not having an affect. I think the way I handle the Observable is wrong.

Below, the _filter function is supposed to filter the this.filteredApproverOptions , however I find that no filter is applied and the entire list is always populated.

private setFilteredApproverOptions(): void {
    for (const field in this.approvalEditFormGroup.controls) {
        this.approvalEditFormGroup.get(field).valueChanges.subscribe(value => {
        if (value && typeof value.valueOf() === "string") {
            this.filteredApproverOptions = this._filter(value);
          const x = parseInt(field.charAt(9));
          const y = parseInt(field.charAt(12));
            this.filteredApproverOptions = this.filteredApproverOptions.pipe(map(    // obs.pipe(map(...)) is changing each value coming in an observable/subject
                    pArr => pArr.map(p => ({...p, x: x, y: y}))          // arr.map(...) is changing each value in an array
          ));
        }
      });
    }
}

private _filter(value: string): Observable<Person[]> {

    const filterValue: string = value.toLowerCase();
    let respApprovalState: Observable<Person[]> = this.getApproverOptions(filterValue);
    respApprovalState.subscribe(approverOptions => {
    return approverOptions.filter((option: Person) => {

        let filter: boolean =
        (option.firstName.toLowerCase().includes(filterValue) || option.lastName.toLowerCase().includes(filterValue))

        return filter;  // if this returns true or false, there is no difference
    });
    });
    return respApprovalState;
}

Question

How can I apply the filter to this.filteredApproverOptions ?

Answer 1

Instead of running side-effect inside subscribe, you need to return new observable and use it in the future. Same way as you are doing map above, for example:

return respApprovalState.pipe(
  filter(option => ...)
)

Answer 2

To use correctly an Observable you should not subscribe to it until you consume the data (at the end).

You must pipe your Observable and add your filter in it:

return respApprovalState.pipe(
  filter(data => ...) // Filter the data running through your pipe
);

Unfortunately, you do not provide enough information to know what is approverOptions , we will not be able to provide you a working example.

But you should be able to do it yourself after understanding the pattern of Rxjs Observables.

Here is more information about the filter operator: https://rxmarbles.com/#filter