在Angular2中展开可观察数组

Question

我在我的Angular2应用程序中使用Firebase从我的数据库检索数据。在嵌套的标签列表中返回一个唯一值数组最简单的方法是什么？即在我的示例中，我想返回["Sport", "Adventure", "Music"]，其中第二个“冒险”被省略。

{ 
"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() 

但是，这种方法产生正确的输出，但作为唯一标签的独立的流而不是作为一个阵列

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

Answer 1

UPDATE

我在原始答案中假定它是一个包含单个项目的流。后来的OP澄清它是一个照片列表的流。在这种情况下，我们使用Array#reduce而不是Observable#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在一个流中可观察到的回报独特的个体价值，而不是我们在这里想要的操作。有可能产生一个包含所有标签的序列，每个标签都是一个独立的值，但是我们需要重新对它们进行重新组合。我们可以使用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)) 
     }, [])