Angular 2 Pipe ShortDate в таблице данных NGX

Я хотел бы отформатировать столбец даты как короткую дату в Angular 2 NGX Datatable.

Вот HTML:

<ngx-datatable
  [rows]="toDos"
  [columns]="columns">
</ngx-datatable>

Вот компонент TypeScript

import { Component, OnInit } from '@angular/core';
import { IToDo } from '../shared/todo';
import { ToDoService } from '../shared/todo.service';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})

export class TodoListComponent implements OnInit {

  toDos: IToDo[];
  columns = [
    { prop: 'toDoId' },
    { name: 'To Do', prop: 'name' },
    { prop: 'priority' },
    { prop: 'dueDate'  },
    { prop: 'completed' }
  ];

  constructor(private _toDoService: ToDoService) {
  }

  ngOnInit() {
    this.toDos = this._toDoService.getToDos();
  }
}

Я попробовал это в HTML, но выдает ошибку разбора шаблона:

<ngx-datatable
  [rows]="toDos"
  [columns]="columns"
      <ngx-datatable-column prop="dueDate">
      <ng-template let-value="value" ngx-datatable-cell-template>
        {{value | date[:shortDate]}}
      </ng-template>
    </ngx-datatable-column>
    >
</ngx-datatable>

angular angular2-template ngx-datatable angular2-pipe
person Greg Finzer    schedule 30.03.2017    source источник
comment
это недопустимый HTML   -  person rob    schedule 30.03.2017
comment
Вы тестировали {{ value | date: 'shortDate' }}?   -  person developer033    schedule 14.05.2017

Ответы (5)


arrow_upward
6
arrow_downward

Вы можете просто использовать date pipe для форматирования значения.

{{value | date:'shortDate'}} эквивалентен {{value | date:'ymd'}}, который выводит дату следующим образом: 22/08/2017

person mxr7350    schedule 22.08.2017

arrow_upward
5
arrow_downward 

constructor(
private fb: FormBuilder,
private _currencyPipe: CurrencyPipe,
private _datePipe: DatePipe
) {
this.rows = [
  {from: Date().toString(), to: Date(), amount: 100, verified: false},
  {from: Date(), to: Date(), amount: 100, verified: true},
];
}

ngOnInit() {

this.columns = [
  { name: 'FROM', prop: 'from', pipe: this.datePipe()},
  { name: 'TO', prop: 'to', pipe: this.datePipe()},
  { name: 'AMOUNT', prop: 'amount', width: 85, pipe: this._currencyPipe},
  { name: 'CONFIRM | DELETE', cellTemplate: this.editCell, width: 155}
];
this.buildForm();
}

datePipe () {
return {transform: (value) => this._datePipe.transform(value, 'MM/dd/yyyy')};
}

Вы всегда можете использовать программный подход к применению каналов, на самом деле вы можете создавать собственные каналы с помощью этого подхода. Канал @Input в ngx-dataTable ожидает структуру Pipelike с преобразованием: Function. вы можете создать любую функцию, которая возвращает функцию преобразования и манипулировать данными по своему усмотрению.

person Sebastian Gomez    schedule 08.03.2020

arrow_upward
4
arrow_downward

Надеюсь, что это поможет вам

  <ng-template #dateColumn let-row="row" let-value="value" let-i="index">
    {{value | date:'dd-MM-yyyy'}}
  </ng-template>

export class CvbankListComponent implements OnInit {
  @ViewChild('dateColumn') dateColumn: TemplateRef<any>;
    .
    .
    .
    this.columns = [
       .
       .
      { name: 'Date', prop: 'Date', cellTemplate: this.dateColumn },
    ];
person Amalan Shenll    schedule 09.07.2019

arrow_upward
1
arrow_downward

Ваш HTML неверен. Должно быть так, как показано ниже.

<ngx-datatable
  [rows]="toDos"
  [columns]="columns">
       <ngx-datatable-column name="dueDate">
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{row.dueDate | date:'shortDate'}}
        </ng-template>
      </ngx-datatable-column>
</ngx-datatable>

Пример кода для этого можно найти здесь: https://github.com/swimlane/ngx-datatable/blob/master/demo/sorting/sorting-default.component.ts

Живой пример этого: http://swimlane.github.io/ngx-datatable/

person Sudhakar    schedule 19.09.2018

arrow_upward
1
arrow_downward

Я думал, что этот способ использования свойства pipe в конфигурации столбцов был очень чистым (не уверен, что Angular 2 сможет справиться с этим, как спросил OP, но Angular 10 может)

class DateOnlyPipe extends DatePipe {
  public transform(value): any {
    return super.transform(value, 'MM/dd/y');
  }
}

const columns = [{
  name: 'Date',
  prop: 'dateReported',
  pipe: new DateOnlyPipe('en-US')
}];

источник: https://github.com/swimlane/ngx-datatable/issues/401#issuecomment-311635384

person jbobbins    schedule 09.01.2021