如何更改日期格式angular2答案

【问题标题】：How to change date format angular2如何更改日期格式angular2
【发布时间】：2017-04-11 08:44:38
【问题描述】：

您好，我想根据所选语言更改日期格式，我使用 ng2-translate，这是我的工作代码，但它是静态的：

<span> {{product[col.field] | date : 'dd-MM-yyyy' >}} </span>

我想要一个当前语言的格式日期，像这样：

<span> {{product[col.field] | date : 'DATE.PIPE' | translate >}} </span>

在 en.json 中我有"DATE": { "PIPE": "MM-dd-yyyy"，在 it.json 我有"DATE": { "PIPE": "dd-MM-yyyy" 是否可以？还是有办法以编程方式更改日期格式？

【问题讨论】：

标签： angular pipe formatdatetime ng2-translate

【解决方案1】：

你只需要把翻译部分放在括号里：

{{ product[col.field] | date : ('DATE.PIPE' | translate) }}

如果不这样做，date 管道会将'DATE.PIPE' 字符串作为其日期格式。

【讨论】：

好像不行Cannot read property 'PIPE' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30)还有其他一些错误
您是否将DATE.PIPE 放入撇号 - 作为字符串？我在现有应用程序中尝试过，效果很好。
阅读我的其他评论。您当前的问题与日期管道无关。当您尝试访问该对象时，该对象未初始化。在获取其他信息之前，您需要通过 ngOnInit 方法获取数据或获取日期格式。
好的，现在我没有错误，但它显示了这个结果link
您的本地化 JSON 文件中可能没有正确定义 'DATE.PIPE' 键。尝试仅获取 {{ 'DATE.PIPE' | translate }} 是否显示正确的格式或仅显示 DATE.PIPE 字符串。

【解决方案2】：

只需从日期管道中删除单引号

<span> {{product[col.field] | date : DATE.PIPE | translate >}} </span>

它不起作用的原因是因为单引号使变量名称成为字符串，并且它尝试将其作为 DATE.PIPE 格式进行管道传输，但具有这种名称的格式不存在。希望有道理。

这是一个示例代码

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dateFormat = {
    date: {
      pipe: 'dd-MM-yyyy'
  }
};
  today = Date.now();
}

app.component.html

<span> {{today | date: dateFormat.date.pipe}} </span>

【讨论】：

好像不行Cannot read property 'PIPE' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30)
这只是意味着您尝试访问的对象未定义。显示获取 DATE.PIPE 的位置/方式的代码。
{ "HOME": { "TITLE": "Hello Angular 2 with ng2-translate!", "LOGIN": "Login", "USERNAME":"Username", "USERNAMEREQ":"Username required", "PASSWORDREQ":"Password required", "SELECT": "Change language", "BUTTON": "Login" }, "DATE": { "PIPE": "MM-dd-yyyy" } }
我更新了我的答案以显示带有对象的示例。我想看看你是如何得到这个对象的，或者你是如何初始化它的。原因 PIPE undefined 明确表示该对象不存在。
如果我使用您的示例，它是一个带有延迟加载private loadProductsLazy(event: LazyLoadEvent) { this.userService.getAll(event).subscribe(products => { this.products = products.content; this.totalRecords = products.page.totalElements;}) } 的表，但如果我使用 DATE.PIPE | 则不行翻译

【解决方案3】：

尝试使用一些 moment.js，它有一个翻译/语言环境设置，可以自动更改时区和 stuf

Moment js

docs of moment js

【讨论】：