RXJS перебирает элементы и возвращает массив

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 (a.k.a. mergeMap) и внутри него используйте метод Array map для форматирования. Другими словами что-то вроде

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

Второй подход позволяет избежать развертывания массива (который в первом решении вы используете flatMap) и последующего воссоздания массива или, по крайней мере, ограничивает эту логику в методе map массива

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