angular - Angular - 如何在 @tushalghoshbd ngx-datatable 中格式化 created_at

Question

在 Angular-12 中，我正在实现我正在实现 @tusharghoshbd ngx-datatable 来显示数据。这是我来自 API 的 JSON 响应：

{
  "message": "You have successfully Retrieved Department Detail",
  "error": false,
  "code": 200,
  "results": {
    "departments": {
      "id": 2,
      "unit_id": 5,
      "department_name": "Accounts",
      "created_at": "2021-07-19T13:29:26.000000Z",
      "hod": {
        "id": 1,
        "name": "Adu Lammy",
      }
    },
  }
}

零件：

export class DepartmentComponent implements OnInit {
  @ViewChild('actionTpl', {
    static: true
  }) actionTpl: TemplateRef < any > ;
  @ViewChild('addressTpl', {
    static: true
  }) addressTpl: TemplateRef < any > ;

  isLoading: boolean = false;
  options: any = {};
  departmentList: any[] = [];
  columns: any = {};


  constructor(private departmentService: DepartmentService) {}

  ngOnInit(): void {
    this.isLoading = true;
    this.departmentService.getDepartmentDetail().subscribe(
      data => {
        this.departmentList = [data.results.departments];
        console.log(data);
      },
      error => {
        this.isLoading = false;
      }
    );

    this.options = {
      loader: true
    };
    this.columns = [{
        key: 'id',
        title: '<div class="blue"> ID</div>',
        width: 60,
        sorting: true,
        align: {
          head: 'center',
          body: 'center'
        },
        vAlign: {
          head: 'bottom',
          body: 'middle'
        }
      },
      {
        key: 'department_name',
        title: '<div class="blue">Department Name</div>',
        width: 100
      },
      {
        key: 'created_at | date',
        title: '<div class="blue">Date Created</div>',
        width: 100
      },
      {
        key: '',
        title: '<div class="blue">Action</div>',
        align: {
          head: 'center',
          body: 'center'
        },
        sorting: false,
        width: 80,
        cellTemplate: this.actionTpl
      }
    ];
  }
}

HTML：

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="departmentList" [columns]="columns" [options]="options">
  <ngx-caption>
    <div class="row">
      <div class="col-sm-6 col-xs-6 col-6 ">
        <b>
                  <i class="fa fa-table" aria-hidden="true"></i>
                  Site Info. List
              </b>
      </div>
    </div>
  </ngx-caption>

  <ng-template #addressTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">

  </ng-template>
  <ng-template #actionTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">

  </ng-template>

</ngx-datatable>

我想格式化日期 created_at。我做了 created_at | 日期，但它不起作用。

如何摆脱 2021 年 7 月 19 日的 created_at 格式和额外的字符串？

谢谢

标签： angular

Answer 1

您可以使用 格式化created_at列cellTemplate。

解决方案

部门.component.html

<ngx-datatable tableClass="table table-striped table-bordered table-hover" [data]="departmentList" [columns]="columns"
  [options]="options">
  ...

  <ng-template #createdAtTpl let-row let-rowIndex="rowIndex" let-columnValue="columnValue">
    {{ columnValue | date: 'yyyy-MM-dd' }}
  </ng-template>
</ngx-datatable>

部门.component.ts

export class DepartmentComponent implements OnInit {
  ...

  @ViewChild('createdAtTpl', {
    static: true
  })
  createdAtTpl: TemplateRef<any>;

  ngOnInit(): void {
    ...

    this.columns = [
      ...
      {
        key: 'created_at',
        title: '<div class="blue">Date Created</div>',
        width: 100,
        cellTemplate: this.createdAtTpl
      },
      ...
    ];
  }
}

StackBlitz 上的示例解决方案