Question

我是前端开发和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 Date Pipe不能将多个日期值传递给字符串，它的返回类型为string，而不是string[]。

所以我想知道是否有办法在HTML中编写类似for循环的东西来实现这个任务。例如，它需要date[]，并将其每个项目发送到日期管道，并将结果合并到string[]并将其发送到dateRange管道。

Answer 1

date管道在这里不会帮助你，因为：a）因为你已经把它弄清楚了日期管道没有把数组作为输入; b）您有特殊要求将两个日期转换为其表示的实际混合部分，日期管道不知道如何进行。你需要实现自己的dateRange管道（你正在尝试的那种），它会占用一系列日期，并根据你的意愿生成单个字符串格式。

Answer 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（）]。

Angular2使用日期管道作为日期数组

2 个答案: