Question

我的名为“ 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;
        })
      );

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），并在其中使用数组{{1} }方法来进行格式化。换句话说，类似

map

第二种方法避免了Array的展开（在第一个解决方案中，您使用pipe( map(response => response.items.map(item => { item.date = moment(item.date).format('YYYY-MM-DD').toString(); return item; })) )）和随后的Array重新创建，或者至少将此逻辑限制在以下方法的flatMap方法中：数组

Answer 2

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()
  );

Answer 3

@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}}

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

3 个答案: