如何使用值时间戳过滤 Angular Material table 字段？

Question

数据源

    [
        {name:'User1',date:1605082722360},
        {name:'User2',date:1605022729782}
    ]

list.component.html

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.name">{{element.name}}</td>
        </ng-container>
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Date </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.date">{{element.date | date}}</td>
        </ng-container>
</table>

请帮我过滤mat-table，例如nov 10来自上面的dataSource?

Answer 1

您可以在日期管道中定义日期格式https://angular.io/api/common/DatePipe

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.name">{{element.name}}</td>
        </ng-container>
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Date </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.date">{{element.date | date:'MMM d'}}</td>
        </ng-container>
</table>

要按日期过滤，您可以执行以下操作

<ng-container *ngIf="element.date | date:'MMM d' === 'Nov 10'"><ng-container>

Answer 2

我的回应是使用最佳实践并在 http 调用中调用数据过滤器，像参数 es 一样传递数据：

http://your-call?data=....

但如果您不想这样做，我建议您在 .ts 文件中使用局部变量，例如：

html:

//in the stamp of row of your table 
<div *ngIf="element.data==local-data">

在 ts:

local-data;
passData(data){
this.local-data=data;
}

Answer 3

设置自定义的 filterPredicate 方法可以帮助您解决这个问题，请参考下面提到的 stackblitz link

stackblitz

如何使用值时间戳过滤 Angular Material table 字段？

How to filter Angular Material table field with value timestamp?

angular-material

angular

mat-table