web-dev-qa-db-ja.com

Angular 6サービスでの複数のmap（）呼び出し

複数のオブザーバブルに変換したい複数のオブジェクトを返すHTTPGETリクエストがあります。応答の例を次に示します。

{
    lookup1: 
    [
      {
        "label": "lookup1 option 1",
        "value": 1
      },
      {
        "label": "lookup1 option 2",
        "value": 2
      }
    ],
    lookup2: 
    [
      {
        "label": "lookup2 option 1",
        "value": 1
      },
      {
        "label": "lookup2 option 2",
        "value": 2
      }
    ]
}

これが2つのオブザーバブルを取得する私のサービスです：

this.lookup1 = this.apiService.get('/lookups/')
  .pipe(map(response => response["lookup1"]));
this.lookup2 = this.apiService.get('/lookups/')
  .pipe(map(response => response["lookup2"]));

1つのHTTPGETリクエストでこれを行うにはどうすればよいですか？

編集

このようなコードは2つのHTTPGETリクエストを実行することに注意してください。

let lookups = this.apiService.get('/lookups/');
this.lookup1 = lookups
  .pipe(map(response => response["lookup1"]));
this.lookup2 = lookups
  .pipe(map(response => response["lookup2"]));
angularrxjsrxjs6
6
Jess

方法1

リクエストが解決すると更新される2つのサブジェクトを作成します。

let map1 = new Subject();
let map2 = new Subject();

this.lookup1 = map1.pipe(map(response => response["lookup1"]));
this.lookup2 = map2.pipe(map(response => response["lookup2"]));

this.apiService.get('/lookups/').subscribe( response => { 
   map1.next(response);
   map2.next(response);
})

方法2

concatMapとfromを使用して、ストリームを別のストリームに変換できます。

this.apiService.get('/lookups/').pipe(
  concatMap( responseJson => from(Object.values(responseJson)))
).subscribe( arrayElement=> console.log(arrayElement))

出力：

// first object emitted : 
[
  {
    "label": "lookup1 option 1",
    "value": 1
  },
  {
    "label": "lookup1 option 2",
    "value": 2
  }
]

// second object emitted :

[
  {
    "label": "lookup2 option 1",
    "value": 1
  },
  {
    "label": "lookup2 option 2",
    "value": 2
  }
]

concatMap Observableを取得し、別のObservableを発行します。

from反復可能な要素をストリームに変換します。 iterableのアイテムと同じ量の排出量が得られます。

3
madjaoue