在动态 Angular Table 上应用日期管道

Question

我的“数据”对象看起来像

[
 {"id": "abc001", "lastInspectionDate": "2019-09-26T00:00:00.000Z", "nextInspectionDate": "2021-09-26T00:00:00.000Z"},
 {"id": "abc002", "lastInspectionDate":"2018-08-25T00:00:00.000Z",  "nextInspectionDate": "2020-08-25T00:00:00.000Z"}
]

我想以动态方式显示数据table。下面是我的 HTML 代码。

<table mat-table [dataSource]="dataSource" class="mt-2 mat-elevation-z0">
   <ng-container *ngFor="let column of allCols" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
      <td mat-cell *matCellDef="let row">
         {{ column['lastInspectionDate'] ? (row[column]| date: 'mediumDate') : row[column] }}
      </td>
    </ng-container>
</table>

这是我的 ts 代码，我在其中为 table.

定义数据源

this.dataSource.data = data;
this.pageSize = data.length;
let headers = Object.keys(data[0]);
this.allCols = headers;

我的日期条件管道不起作用。你们可以帮助我或给我另一种解决方案吗？我已经坚持了一个星期了。非常感谢您的帮助。

Answer 1

也许你应该试试这个:

<table mat-table [dataSource]="dataSource" class="mt-2 mat-elevation-z0">
   <ng-container *ngFor="let column of allCols" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
      <td mat-cell *matCellDef="let row">
         {{ column === 'lastInspectionDate' ? (row[column]| date: 'mediumDate') : row[column] }}
      </td>
    </ng-container>
</table>

在动态 Angular Table 上应用日期管道

Applying Date Pipe on Dynamic Angular Table

typescript

date-pipe

angular

mat-table