Question

如果从数组中获取数据，如何更改日期显示格式？

您需要为此做什么？如果这样做的话，那将是胡说八道。

{{row[column.lowercaseValue] | date}}

html：

<table mat-table class="tb" [dataSource]="dataSource" matSort matSortDisableClear matSortActive="NAME"
matSortDirection="asc">
<ng-container [matColumnDef]="column.value" *ngFor="let column of allCols;">
    <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="load()">
        {{column.displayName}}
    </th>
    <td mat-cell *matCellDef="let row">
        {{row[column.lowercaseValue]}}
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

ts：

const COLS = [
  { value: "NAME", lowercaseValue: "name", displayName: 'Full name' },
  { value: "EMAIL", lowercaseValue: "email", displayName: 'E-mail' },
  { value: "MSG", lowercaseValue: "msg", displayName: 'Message' },
  { value: "DATE", lowercaseValue: "date", displayName: 'Date' }
];

JSON：

{
    "rowCount": 2944,
    "user": [
        {
            "name": "Jaden Adrian Sanders",
            "email": "sowixowew@ionemail.net",
            "msg": "No binding defined",
            "date": "2019-08-16T02:30:03.000Z"
        },
...
}

或者可以通过某种方式进行全局设置，以便根据需要显示日期？

Answer 1

您需要检查column.value是否为DATE，以便管道仅适用于date中的dataSource字段。

尝试一下

{{column.value === 'DATE' ? (row[column.lowercaseValue] | date): row[column.lowercaseValue]}}

如果数据来自数组，如何更改日期显示格式？

1 个答案: