web-dev-qa-db-fra.com

Comment formater les données avant de les afficher sur une grille ag

Je viens de découvrir ag-grid . Je l'utilise sur angular2 + et je charge des données depuis l'api. L'un des champs est la date, mais son format ISO. J'ai essayé de le formater, y a-t-il un moyen de le faire, est-il possible d'ajouter un tuyau ou d'une autre manière? Habituellement, je le fais comme ça {{someISODate | date: 'jj.MM.aaaa HH: mm'}}. Dois-je vraiment le formater manuellement dans le composant avant de l'afficher? Je me demandais également s'il était possible d'ajouter deux champs sous une seule colonne. Pourquoi? Eh bien, j'ai l'auteur de la colonne, et dans les données que je reçois de l'API, j'ai author.firstname et author.lastname, et maintenant je veux afficher les deux champs dans la même colonne. Tous les conseils ou exemples sont plus que bienvenus.

columnDefs = [
    {headerName: 'Datum kreiranja', field: 'createdAt' }, //<-- wanna format it
    {headerName: 'Vrsta predmeta', field: 'type.name' },
    {headerName: 'Opis', field: 'description'},
    {headerName: 'Kontakt', field: 'client.name'},
    {headerName: 'Autor', field: 'author.firstname'}, //<-- wanna display author.lastname in same cell
    {headerName: 'Status', field: 'status.name'}
];
ag-gridag-grid-ng2
10
Kerim092

Vous pouvez le faire en utilisant la bibliothèque cellRenderer et moment.

 {
      headerName: 'Datuk kreiranja', field: 'createdAt',
      cellRenderer: (data) => {
          return moment(data.createdAt).format('MM/DD/YYYY HH:mm')
      }
 }

Si vous ne souhaitez pas utiliser moment, voici comment vous pouvez le faire.

cellRenderer: (data) => {
     return data.value ? (new Date(data.value)).toLocaleDateString() : '';
}

Pour le champ Author également,

cellRenderer: (data) => {
     return data.author.firstname + ' ' + data.author.lastname;
}

Référence: ag-grid: Cell Rendering

6
Paritosh

Pour Angular, si vous voulez le faire sans moment.js, vous pouvez essayer quelque chose comme ci-dessous:

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-xyz'
})
export class xyzComponent implements OnInit {

  constructor( @Inject(LOCALE_ID) private locale: string ) {
  }

  columnDefs = [

    {headerName: 'Submitted Date', field: 'lastSubmittedDate', cellRenderer: (data) => {
      return  formatDate(data.value, 'dd MMM yyyy', this.locale);
     }];

}

Ce composant utilise le format date angulaire/commun

0
Vishwajeet

(La solution de travail et optimisée pour le formatage de la date est ici!)

Testé sur Angular 8 avec des données dynamiques où la date arrive comme 2019-11-16T04: 00: 00.000Z. Dans Ag-grid si vous utilisez valueFormatter, alors pas besoin d'inclure "field: ' Date de commande'".

Suite également à la réponse de Ragavan Rajan. Vous devez donc installer moment.js dans votre angular CLI.

Le code de travail et l'installation sont ci-dessous:

//Install moment.js in angular 8 cli.(no need of --save in latest versions
  npm install moment

//In your component.ts
  import * as moment from 'moment';

//Inside your colDef of ag-grid
  {
    headerName: "Effective Date",
    field: "effectiveDate",
    valueFormatter: function (params){
       return moment (params.value).format ('DD MMM, YYYY');
 }

/*
* This will display formatted date in ag-grid like 16 Nov, 2019.
* field name's value is from server side.(column name).
*/
0
Jenish Patel

Vous pouvez utiliser valueFormatter

{headerName: 'Datuk kreiranja', field: 'createdAt', valueFormatter: this.dateFormatter},

Créez une petite fonction:

dateFormatter(params) {
  return moment(params.value).format('MM/DD/YYYY HH:mm');
}
0
DancingDad