角 4 |如何使用管道格式化日期？

Question

早安，

如何使用 Angular 管道格式化我的日期？我遇到了麻烦，因为它总是返回错误的日期。

下面是我如何格式化我的日期。

实际值 20170901

<span>{{apidata.DeliveryDate | date: 'yyyy-MM-dd'}}</span>

它返回 (1970-01-01)

我该如何解决这个问题？

Answer 1

DatePipe 转换Date 对象或保存在 ISO 字符串中的日期。您要格式化的是一个数字（这是一个真正的后端设计问题）...您可以将日期转换为实际格式，例如通过使用moment 库：

apidata.deliveryDate = moment(apidata.DeliveryDate, 'YYYYMMDD').toISOString();

然后它就会起作用。您还可以创建自定义管道，为您转换和格式化“日期”。组件内解决方案示例代码：

// regular imports
import * as moment from 'moment';

@Component({
  template: `<span>{{apidata.deliveryDate | date: 'yyyy-MM-dd'}}</span>`
})
export class SomeComponent {
  apidata: any;

  constructor(someService: SomeService) { // <-- this is a service you get your data from
    this.someService.getApiData().subscribe((apidata) => {
      this.apidata = apidata;
      this.apidata.deliveryDate = moment(apidata.DeliveryDate, 'YYYYMMDD').toISOString();
    } 
  }
}