Angular2で観測可能な配列を平らにする

Question

私はAngular2アプリケーションでFirebaseを使用してデータベースからデータを取得しています。入れ子になったタグのリストにユニークな値の配列を返すのが一番簡単ですか？私。私の例では、["Sport", "Adventure", "Music"]の2番目の「アドベンチャー」が返されます。

{ 
"images": { 
    "image1": { 
     "path": "path", 
     "date": 43534532123, 
     "tags": { 
      0: "Sport", 
      1: "Adventure" 
     } 
    }, 
    "image2": { 
     "path": "path", 
     "date": 43534532123, 
     "tags": { 
      0: "Music", 
      1: "Adventure" 
     } 
    }    

} 

私はこのアプローチを試みたが、それは最初の画像のみ

return this.af.database.list('/photos/user') 
     .map(photos => photos.map(photo => photo.tags)) 
     .concatAll() 
     .distinct() 

から要素を分割するようだしかし、このアプローチは、正しい出力が得られるが、ユニークなタグの別の流れとしての代わりとして1つの配列

return this.af.database.list('/photos/user') 
     .map(photos => photos.map(photo => photo.tags)) 
     .mergeAll() 
     .mergeAll() 
     .distinct() 

Answer 1

UPDATE

元の回答では、それは個々のアイテムを持つストリームであると仮定しました。その後、OPはの写真のリストであることを明確にしました。この場合、Observable#reduceの代わりにArray#reduceを使用します。

return this.af.database.list('/photos/user') 
    .map(photos => photos.map(photo => photo.tags) 
     .reduce((allTags, current) => { 
      return allTags.concat(
       current.filter(item => allTags.indexOf(item) === -1)) 
     }, [])) 

ストリームで観察戻りユニークな個々の値を超える

distinct ORIGINAL ANSWER、しかし、我々はここにしたい演算子ではありません。すべてのタグをそれぞれ別個の値としてシーケンスを生成することは可能ですが、再度それらを再グループ化する必要があります。

代わりに、reduceを使用することができます。これは、配列対応物と非常によく似ています。初期値（[]）をとり、他の値を累積します。私たちは、各反復ごとに個別の値を持つリストを作成しました。 reduceの後には、ユニークなタグの配列があります。

.list()は、それが機能するためには観測可能な値を記入する必要があります。

return this.af.database.list('/photos/user') 
     .map(photos => photos.map(photo => photo.tags)) 
     .reduce((allTags, current) => { 
      return allTags.concat(
       current.filter(item => allTags.indexOf(item) === -1)) 
     }, [])