Angular 如何使用 rxjs 管道从可观察对象中过滤数据

Question

我在我的服务文件中调用了一个名为 getWorkOrders() 的方法，该方法又调用服务器以获取记录。

这是我的服务。我正在使用新的 HttpClient。

export class BackendServices {
  private BASE_URL ='http://localhost:3000/backend';
  constructor(private http: HttpClient) {}
  getWorkOrders(){
    return this.http.get(this.BASE_URL + '/getworkorders/');
 }
}

Component.ts 文件

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .subscribe((data: any) =>
            this.woSubject.next(data),
        );
      }

如何从组件 getWorkOrders 方法中过滤从服务器获取的所有记录中的数据。我知道它正在使用管道和过滤器 rxjs 运算符，但不确定如何将它们组合在一起。

Answer 1

如果您想使用 rxjs 过滤器过滤来自服务器的工单，您需要将工单数组转换为可观察的工单，例如。

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/')
                   .pipe(map((data) => Observable.from(data));
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(
              filter(data => data.timestamp > 123456786 ),
              toArray()
           )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

另一种方法是使用标准数组过滤器过滤地图中的数组，例如。

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/');
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(map(data => data.filter(workorder => workrder.timestamp > 123456786) )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

我想问的一个问题是，为什么要将可观察订阅的结果推送到行为主题中？通常，如果您将订阅的结果推送到另一个可观察对象中，您可以通过组合可观察对象来实现相同的目的

Angular 如何使用 rxjs 管道从可观察对象中过滤数据

Angular how do I filter the data from an observable using rxjs pipe

angular

rxjs6