小编ama*_*ode的帖子

FilterPredicate 表(按具有 Angular 材质的列)

我想使用谓词过滤器按列过滤我的 mat-table 结果。我已经使用了一个简单的过滤器,但它过滤了所有列中的所有数据。我搜索类似的主题,但我不知道如何使用它。我尝试对所有列重复我的代码,但不起作用。

请参阅下面的代码:

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="example-container mat-elevation-z8">
    <div class="example-header">
        <div>
            <mat-table [dataSource]="dataSource" matSort>
                <ng-container matColumnDef="aa">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>aa title</mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{user.aa}} </mat-cell>
                </ng-container>
                <ng-container matColumnDef="bb">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> bb tilte </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{user.bb}} </mat-cell>
                </ng-container>
                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>
            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

和我的.ts

export class MynewComponent implements OnInit {
    dataSource = new MatTableDataSource();
    displayedColumns = ['aa', 'bb'];
    @ViewChild(MatPaginator) paginator: …
Run Code Online (Sandbox Code Playgroud)

angular-material angular

2
推荐指数
1
解决办法
7718
查看次数

标签 统计

angular ×1

angular-material ×1