Angular2将日期管道用于日期数组答案

【问题标题】：Angular2 using date pipe for an array of datesAngular2将日期管道用于日期数组
【发布时间】：2017-04-15 12:33:35
【问题描述】：

我是前端开发和 Angular2 的新手。

我正在编写一个应用程序，其中给了我一个 fromDate 和一个 endDate，并且该应用程序需要显示日期范围。比如fromDate = '10/02/2016' endDate = '11/02/2016'，应用会显示日期范围为：2016年2月10-11日，这个日期范围格式未来可能会发生变化（当然也需要考虑月份或年份不同的情况）。

我的想法是使用链接管道：{{ dateArray | date: 'dd/MM/yyyy' | rangeDate}} 其中dateArray = [fromDate, endDate]，我希望{{ dateArray | date: 'dd/MM/yyyy'}} 可以返回两个格式化的日期字符串（在一个数组中），这样我就可以使用我创建的自定义管道：

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'dateRange'})
export class DateRangePipe implements PipeTransform {
  transform(value: string[], args: any[]) {
    return "desired output";
  }
}

使用两个字符串轻松操作，得到所需的输出。

但这是错误的，因为 Angular 2 日期管道不能将多个日期值传输到字符串，并且它的返回类型是 string，而不是 string[]。

所以我想知道是否有办法在 HTML 中编写类似 for-loop 的东西来完成这项任务。就像，它需要一个date[]，并将其每个项目发送到日期管道，并将结果组合成一个string[]，并将其发送到 dateRange 管道。

【问题讨论】：

标签： html date angular typescript

【解决方案1】：

date 管道在这里对您没有帮助，因为：a) 正如您已经知道的那样，日期管道不会将数组作为输入； b）您有特殊要求将两个日期转换为它们表示的实际混合部分的东西，日期管道不知道如何做到这一点。您需要实现自己的 dateRange 管道（您正在尝试的那种），它将采用日期数组并生成您希望格式化的单个字符串作为输出。

【讨论】：

【解决方案2】：

您需要的是一个接收日期数组的日期管道，我这样做了，它对我有用：

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
    name: 'rangeDate'
})

export class RangeDatePipe implements PipeTransform {
    transform(rangeDates: any, args?: any): any {
        if (rangeDates) {
            const range = rangeDates.map(d => moment(d).format('DD/MM/YYYY'));
            return range[0] + ' - ' + range[1];
        } else {
            return null;
        }
    }
}

您可以将日期数组传递给管道，例如：[new Date(), new Date()]。

【讨论】：