Rxjsパイプがangular's Http.get（）で動作しない

Question

データを取得するためにサービスを呼び出すAngular 4 Componentがあります。最も奇妙な状況ではありません。私はデータを取得し、それを変換し、それをフィルタリングする必要があります。明らかに、これを行う方法は、パイプを使用することです。私のサービスで

ngOnInit(): void { 
    this.suService.getShippingUnitTypes().subscribe(res => { 
     console.log("Getting shipping unit types: ", res); 
    }); 
} 

：私のコンポーネントで

import { Injectable } from '@angular/core'; 
import { Http, Response, RequestOptions, Headers, RequestMethod } from '@angular/http'; 
import { Observable, pipe } from 'rxjs/Rx'; 
import { map, filter } from 'rxjs/operators'; 

デバッグ、コードは決して誤りが得ない単にんが、ときに：

getShippingUnitTypes(): any { 
    const convertToJson = map(value => (value as any).json().XXETA_GRID_STATIC_LOV); 
    const filterShippingUnit = filter(value => (value as any).LOV_TYPE == "SHIPPING_UNIT"); 

    return this.http.get(
     this.constantsService.LOOKUP_COLUMN_BATCH_URL 
    ).pipe(convertToJson, filterShippingUnit); 
} 

サービスは、次のインポートコンポーネントのconsole.log（）ステートメントに追加します。 .pipe（）を削除してObservableを返すだけで、変換とフィルタリングがなくても期待できるコードがログに記録されます。

私はRxjsとPipeを使うのがとても新しいです。私は明らかに何かを理解していない。

編集した情報を追加するには：

私は、このような...

pipe(tap(console.log), convertToJson, tap(console.log), filterShippingUnit, tap(console.log)) 

のようにパイプを活用入れ私はタップが存在することを知りませんでしたが、それは便利です。最初の2つのコンソールログは、私が期待するものを私に与えます。 3番目のフィルタは、filterShippingUnitの直後には何もしません。それはまったく値を記録しません。 nullでもない。

convertToJson console.logの後に28個のオブジェクトの配列が吐き出されます。オブジェクトの1つは

{LOV_TYPE: "SHIPPING_UNIT", LOV_TAB_TYP_ITEM: Array(4)} 

です。filterShippingUnitフィルタに基づいてそのオブジェクトを渡すことが期待されます。

Answer 1

ここでの問題は、最も可能性が高いです。

const filterShippingUnit = filter(value => (value as any).LOV_TYPE == "SHIPPING_UNIT"); 

は、次のようにJSONへの応答の本体を解析した後、あなたはFooが定義されているタイプFoo、の配列を取得すると仮定すると：

interface Foo { 
LOV_TYPE: string; 
fooProperty: string; 
fooNumber: number; 
} 

フィルタは、配列オブジェクトに含まれているオブジェクトではなく、配列オブジェクトに適用しようとしています。

2つのオプションがあります：配列を平坦化し、その値を特異イベントとして放出し、それらを再びアレイとしてまとめるか、新しい配列にマップします。もう一つは、最も簡単なものは次のよう：

const filterShippingUnit = map((list: Foo[])=> list 
       .filter(foo => foo.LOV_TYPE === "SHIPPING_UNIT")); 

最初のアプローチとして実装することができます：あなただけの角度で開始されていることに気づくことがその簡単なよう

import { flatMap, toArray } from 'rxjs/operators'; 

return this.http.get(this.constantsService.LOOKUP_COLUMN_BATCH_URL) 
    .pipe(
     flatMap(response => response.json() as Foo[]) 
     map(foo => foo.LOV_TYPE === "SHIPPING_UNIT") // TypeScript will infer that foo is of type Foo 
     toArray 
    ); 

、私はあなたに次のことを示唆しています：

• 新しいのHttpClientを使用し
• バックエンドから来ているすべてのためのインタフェースを定義します角度からのAPIは（HTTPはを廃止されて、https://angular.io/guide/httpを参照してください）
• 私が思ういけない（チュートリアルで提案されているように/あなたは以下の通り案内）あなたがストリームに使用する操作を保存するために、一定の機能を定義する必要があります。引数型を明示的に宣言しないと、すべての型情報が失われます。しかし、これについて私を信頼してはいけませんが、タイプスクリプトがタイプを推論できるという事実にもかかわらず、明示的に宣言する良い練習にもかかわらず、それは明示的に宣言するのが良い練習です...