Javascript 以角度2展平可观测阵列

我在Angular2应用程序中使用Firebase从数据库中检索数据。最简单的方法是在嵌套标记列表中返回一个唯一值数组？例如，在我的示例中，我想返回

[“运动”、“冒险”、“音乐”]

，其中省略了第二个“冒险”

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

---

更新

在最初的回答中，我假设它是一个包含各个项目的流。后来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

，这与对应的数组非常相似。它接受一个初始值（

[]

），并累加其他值。我们在每次迭代中建立了一个包含各个值的列表。在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))
      }, [])

---

我的错，应该是image1和Image2老实说，你甚至不需要任何特殊的可观察魔法…你的

map

函数可以从API中获取对象并将其减少到该数组中。它的所有逻辑都可以进入

map

回调。Observable本身运算符更适合于操作数据流，而不是流中的数据。细微的差别，但很重要。这就是为什么我认为在

map

的回调中，您可以简单地处理数据。您不需要

distinct

emissions，您需要更改实际数据。为了提高问题的质量，请澄清可观察

this.af.database.list（'/photos/user'）

的结构。定义类型和成员。谢谢。这看起来是一个很好的解决方案，但不幸的是，它不起作用。1） 我得到一个错误，属性包含“类型”any[]上不存在”。而且，当我订阅结果时，我没有得到任何输出。我应该如何确保.list（）是完整的，才能使其工作？re:

包括

，它来自ES2016，将

lib:[“ES2016”]

添加到

tsconfig.json

。你可能需要一个塑料填充。我想我会将答案改为使用indexOf（），至于.list（），最需要完成的部分应该是在调用.map（）之前调用take（x）之类的东西吗？看起来有些不对劲<代码>映射（照片=>接收什么对象？我希望有一个

/user

.哼哼，那是另一回事。从我的帖子中，从

photo.tags）中删除一个
，然后附加到
[]）
。那么告诉我它是否有效。