webentwicklung-frage-antwort-db.com.de

So formatieren Sie Daten, bevor Sie sie in ag-grid anzeigen

Ich habe gerade ag-grid entdeckt. Ich benutze es auf angle2 + und lade Daten von der API. Eines der Felder ist Datum, aber es ist im ISO-Format. Ich habe versucht, es zu formatieren. Gibt es eine Möglichkeit, dies zu tun? Ist es möglich, Pipe hinzuzufügen oder auf andere Weise? Normalerweise mache ich das so {{someISODate | Datum: 'TT.MM.JJJJ HH: MM'}}. Muss ich es wirklich manuell in der Komponente formatieren, bevor ich es anzeige? Ich habe mich auch gefragt, ob es möglich ist, zwei Felder unter einer Spalte hinzuzufügen. Warum? Nun, ich habe einen Spaltenautor, und in Daten, die ich von der API erhalte, habe ich author.firstname und author.lastname, und jetzt möchte ich beide Felder in derselben Spalte anzeigen. Hinweise oder Beispiele sind mehr als willkommen.

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'}
];
10
Kerim092

Sie können dies tun, indem Sie die Bibliotheken cellRenderer und moment verwenden.

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

Wenn Sie moment nicht verwenden möchten, sehen Sie unten, wie Sie dies tun können.

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

Auch für das Feld Author

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

Referenz: ag-grid: Cell Rendering

6
Paritosh

Wenn Sie dies für Angular ohne moment.js tun möchten, können Sie Folgendes ausprobieren:

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);
     }];

}

Diese Komponente verwendet das Formatdatum Winkel/Allgemein

0
Vishwajeet

(Working & Optimized Lösung für die Datumsformatierung ist hier!)

Getestet am Angular 8 mit dynamischen Daten, bei denen das Datum wie 2019-11-16T04: 00: 00.000Z kommt. Wenn Sie im Ag-Grid valueFormatter verwenden, muss "field:" nicht eingefügt werden. Auftragsdatum'".

Auch nach Ragavan Rajans Antwort. Sie müssen also moment.js in Ihrer angular CLI) installieren.

Arbeitscode und Installation sind unten:

//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

Sie können valueFormatter verwenden

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

Erstellen Sie eine kleine Funktion:

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