RXJS 循环遍历项目并返回一个数组答案

【问题标题】：RXJS loop through items and return an arrayRXJS 循环遍历项目并返回一个数组
【发布时间】：2018-09-04 16:17:06
【问题描述】：

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

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

我正在使用 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;
        })
      );

【问题讨论】：

你可以在模板本身中使用管道格式化日期
@mohammedsameen 你能举个例子吗？
类似：{{list$ |异步 |日期：'yyyy-MM-dd'}} angular.io/api/common/DatePipe
工作了，谢谢。不过最好不要使用 RXJS 来做到这一点

标签： javascript angular typescript rxjs

【解决方案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;
    }))
)

第二种方法避免了 Array 的展开（在第一个解决方案中，您使用 flatMap）和随后的 Array 重新创建，或者至少将此逻辑限制在 Array 的 map 方法中

【讨论】：

【解决方案2】：

@Pipe({
    name: 'dateFormat'
})
export class DateFormat implements PipeTransform {
    transform(value: any, args: string[]): any {
        if (value) {
            var date = value instanceof Date ? value : new Date(value);
            return DateFormatter.format(date, 'pt', 'YYYY-MM-DD');
        }
    }
}

在您的模板中使用上述管道（自定义管道）

{{ date | dateFormat}}

【讨论】：

不想要自定义管道解决方案。它们也很慢

【解决方案3】：

const formatItem = item => {
  item.date = moment(item.date).format('YYYY-MM-DD').toString();
  return item;
};

this.list$ = this.service.getList()
  .pipe(
    flatMap(response => from(response.items.map(formatItem))), // returns Observable<items> from array of items
    // flatMap merges back the observables into one
    toArray()
  );

【讨论】：