如何仅过滤dataTable angular中的一列[重复]

Posted 2023-03-13

【中文标题】如何仅过滤dataTable angular中的一列[重复]

【英文标题】：How to filter just one column in dataTable angular [duplicate]

【发布时间】：2020-07-07 22:31:33

【问题描述】：

我正在做一个有角度的项目我已经创建了一个带有排序/分页/和过滤的数据表，但我现在需要按一列过滤我的表格，例如，我需要按 CIN 过滤我的表格。

我的 cpm.ts：

fake_arr: fake[] = [];
displayedColumns: string[] = ['Role', 'Email', 'Fullname', 'CIN', 'Age', 'actions'];
listdata: MatTableDataSource < any > ;

@ViewChild(MatSort,  static: true ) sort: MatSort;
@ViewChild(MatPaginator, null) paginator: MatPaginator;
searchkey: string;

ngOnInit() 
    this.service.getUsers().subscribe((arr: fake[]) => 
        arr.forEach(element => 
            console.log(element);
        );
        this.listdata = new MatTableDataSource(arr);
        this.listdata.sort = this.sort;
        this.listdata.paginator = this.paginator;
    );


onfilterClear() 
    this.searchkey = "";


applyfilter() 
    this.listdata.filter = this.searchkey.trim().toLowerCase();
 

cmp.html:

<div class="mat-elevation-z8">
    <mat-table [dataSource]="listdata" matSort>
        <ng-container matColumnDef="Role">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Role</mat-header-cell>
            <mat-cell *matCellDef="let element">element.Role</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Email">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
            <mat-cell *matCellDef="let element">element.email</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Fullname">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Fullname</mat-header-cell>
            <mat-cell *matCellDef="let element">element.Fname</mat-cell>
        </ng-container>
        <ng-container matColumnDef="CIN">
            <mat-header-cell *matHeaderCellDef mat-sort-header>CIN</mat-header-cell>
            <mat-cell *matCellDef="let element">element.CIN</mat-cell>
        </ng-container>
        <ng-container matColumnDef="Age">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Age</mat-header-cell>
            <mat-cell *matCellDef="let element">element.age</mat-cell>
        </ng-container>
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let row">
                <button mat-icon-button>
                    <div class="tooltip">
                        <mat-icon>create</mat-icon><span class="tooltiptxt">Éditer</span>
                    </div>
                </button>
                <button mat-icon-button color="warn" class="sup">
                    <div class="tot">
                        <mat-icon>delete_outline</mat-icon><span class="tottxt">Supprimer</span>
                    </div>
                </button>
            </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]" [pageSize]="5"></mat-paginator>
</div>

请指导我如何修改我的代码来做到这一点

【问题讨论】：

不，我需要通过仅订购一个数据来制作过滤器输入过滤器，例如如果我有像 "name:"ala,"age:"15,"father:ihab"" 这样的数据name:"sami,"age:"15,"father:ala" 这里我需要按名字过滤，例如我们在这里输入 ala 过滤结果只是 "name:"ala,"age:"15,"父亲：ihab"现在清楚了吗？

嗨。如果您可以准备一个堆栈闪电战，了解您的代码现在的状态，那将真的很有帮助stackblitz.com

我有本地 API 的问题

【参考方案1】：

您可以使用 filter 方法创建一个数组，其中填充所有通过的数组元素 测试：

    applyFilter(key: string) 
            const list=this.listdata.filter(a => String(a[key]).toLowerCase() == 
            String(this.searchKey).toLowerCase())
            this.dataSource = new MatTableDataSource<yourType>(list);
            this.listdata.sort = this.sort;
            this.listdata.paginator = this.paginator;
       

其中 key 是执行搜索的对象的属性。 所以如果表数组有这两个对象：

["name:"ala,"age:"15,"father:ihab""name:"sami,"age:"15,"father:ala"]

如果 key 是 name 并且你的 serach key 是 ala 它会找到：

"name:"ala,"age:"15,"father:ihab"