以JSON格式格式化时间以显示在ag网格中

我使用的是角度为5的ag网格。 我的目标是创建一个包含一些列的网格，其中一列是“时间”列，并以这种格式“hh:mm”显示时间

我在网格中显示的所有数据都来自一个JSON对象。现在我显示的时间像这样“2018-04-28T08:16:07.632Z”

我看过一些Angle Pipes，但我不知道如何将其用于JSON对象，其中我需要格式化一列，但它需要“绑定”到其他列中的正确单元格。我认为所有的格式都必须在typescript代码中完成

---

你们中有没有人做过类似的事情或有这样做的想法？

也许你们会在这个管道中创建一个管道和一个mommentjs。

也许你们会在这个管道中创建一个管道和一个mommentjs。

在Ag Grid中，你们有在某个点上定义的网格选项：

this.gridOptions = {
  // ...
  columnDefs: [    'DATE': {
     headerName: 'Datum',
     field: 'myJson.date',
     cellRenderer: (params: ICellRendererParams) => params.value ? 
        `<div class="my-awesome-date-style">${this._customDatePipe.transform(params.value)}</div>` : ''
  }],
  // ...
}

并在模块的提供程序中包括CustomDatePipe（或本机DatePipe的CommonModule）

管道的transform（）方法将格式化您希望在AgGrid尝试呈现它时立即显示的JSON部分（在您的例子中是date属性）

PS：如果您使用的是AgGrid CellRenderer组件，则可以直接在其模板中使用管道，而无需注入（但仍需插入提供程序）：

---

${params.date | customDatePipe}

在Ag网格中，您可以在某个点定义网格选项：

this.gridOptions = {
  // ...
  columnDefs: [    'DATE': {
     headerName: 'Datum',
     field: 'myJson.date',
     cellRenderer: (params: ICellRendererParams) => params.value ? 
        `<div class="my-awesome-date-style">${this._customDatePipe.transform(params.value)}</div>` : ''
  }],
  // ...
}

并在模块的提供程序中包括CustomDatePipe（或本机DatePipe的CommonModule）

管道的transform（）方法将格式化您希望在AgGrid尝试呈现它时立即显示的JSON部分（在您的例子中是date属性）

PS：如果您使用的是AgGrid CellRenderer组件，则可以直接在其模板中使用管道，而无需注入（但仍需插入提供程序）：

---

${params.date | customDatePipe}

我在这方面没有发现相同的问题，问题非常简单，因此我将解释我所做的：

在coulmDefs中，我添加了valueFormatter:HomePage.timeFormatter

然后我将此函数添加到同一个文件中：

// I take the substring of this '2018-04-28T08:16:07.632Z' and I get '08:16'
static timeFormatter(params) {return params.value.substring(11, 16);}

---

请记住，只有当您知道日期时间每次都以相同的格式出现时，这才有效。

我在这方面没有发现相同的问题，而且问题非常简单，因此我将解释我所做的：

在coulmDefs中，我添加了valueFormatter:HomePage.timeFormatter

然后我将此函数添加到同一个文件中：

// I take the substring of this '2018-04-28T08:16:07.632Z' and I get '08:16'
static timeFormatter(params) {return params.value.substring(11, 16);}

---

请记住，只有当您知道DateTime每次都以相同的格式出现时，这才有效。

这是针对Angular2+版本的。如果您在应用程序中使用矩库。那么工作真的很简单

在.ts文件中：

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('hh:mm');
    },
},

您将得到的输出是：

结束日期： 10:55

使用矩库，您可以配置许多日期格式，包括区域设置支持

---

希望这将有助于一些人

这是针对Angular2+版本的。如果您在应用程序中使用矩库。那么工作真的很简单

在.ts文件中：

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('hh:mm');
    },
},

您将得到的输出是：

结束日期： 10:55

使用矩库，您可以配置许多日期格式，包括区域设置支持

---

希望这将有助于一些人

根据我的经验，Angular的Date pipe可以完成人们使用矩.js的大部分功能。在集成其他框架之前，我建议尝试直接使用DatePipe，或将其作为

CustomDatePipe

中的注入服务。根据我的经验，我已经向其他人展示了Angular的Date pipe，它可以完成人们使用矩.js的大部分功能。在集成其他框架之前，我建议尝试直接使用DatePipe，或将其作为

CustomDatePipe

中的注入服务。很好，我已经为其他人演示了这可能会起作用，但由于您的回答，我偶然发现了这篇文档，其中说“如果您只想对数据进行简单格式化（例如货币或日期格式）然后您可以使用colDef.valueFormatter”，因此我决定使用valueFormatter。这可能会起作用，但由于您的回答，我偶然发现了一个文档，其中说“如果您只想对数据进行简单的格式设置（例如货币或日期格式设置），那么您可以使用colDef.valueFormatter”，所以我决定选择valueFormatter。