javascript - RXJS 遍历项目并返回一个数组

Question

我的名为“getList”的服务返回一个项目列表。我想遍历项目列表并设置日期格式。然后返回格式化后的数组。

我目前的尝试没有返回数组中的项目，因为我使用 flatMap 来循环 map 中的项目。

我正在使用 angular6 和 rxjs。

我的尝试:

this.list$ = this.service.getList()
      .pipe(
        flatMap(response => response.items),
        map(item => {
          item.date = moment(item.date).format('YYYY-MM-DD').toString();
          return item;
        })
      );

Answer 1

您可以简单地在管道的末尾添加 toArray()

this.list$ = this.service.getList()
.pipe(
    mergeMap(response => response.items),
    map(item => {
        item.date = moment(item.date).format('YYYY-MM-DD').toString();
        return item;
    }),
    toArray()
)

但可能更好的是重构你的代码，使用 Observable map 运算符而不是 flatMap(又名 mergeMap)和在其中使用 Array map 方法进行格式化。换句话说，像

pipe(
    map(response => response.items.map(item => {
        item.date = moment(item.date).format('YYYY-MM-DD').toString();
        return item;
    }))
)

第二种方法避免了数组的展开(在第一个解决方案中，您使用 flatMap)和数组的后续重建，或者至少将此逻辑限制在 map 中数组的方法