web-dev-qa-db-ja.com

Angular rxjs pipeを使用してオブザーバブルからデータをフィルタリングするにはどうすればよいですか

サービスファイルで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演算子を使用していることは理解していますが、どのように組み合わせるかはわかりません。

enter image description here

angularrxjs6
9
Sumchans

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),
           );
        }

私が尋ねる1つの質問は、なぜ観察可能なサブスクリプションの結果を行動サブジェクトにプッシュしているのですか？一般に、サブスクリプションから別のオブザーバブルに結果をプッシュする場合、オブザーバブルを組み合わせることで同じことを実現できます

9
glendaviesnz

これは私のために働いた。ただし、必ず正しいマップを使用してください。最初に間違ったものをインポートしました。あなたが欲しい：

import { map } from rxjs/operators;
0
Nabsta