Как отфильтровать только один столбец в dataTable angular

Я работаю над угловым проектом. Я создал таблицу данных с сортировкой/разбивкой на страницы/и фильтрацией, но теперь мне нужно отфильтровать мою таблицу по одному столбцу, например, мне нужно отфильтровать мою таблицу по 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>

Пожалуйста, помогите мне, как изменить мой код, чтобы сделать это


angular angular-material angular-material-table
person omar bouhajja    schedule 27.03.2020    source источник
comment
Нет, мне нужно сделать входной фильтр фильтра, просто указав, например, только одни данные. Если у меня есть такие данные, как {name:ala,age:15,father:ihab}{name:sami,age:15,father:ala}, здесь мне нужно для фильтрации по имени, например, у нас есть аля, как ввод, здесь результат фильтрации просто {имя: ала, возраст: 15, отец: ихаб} Теперь понятно?   -  person omar bouhajja    schedule 27.03.2020
comment
Привет. Было бы очень полезно, если бы вы могли подготовить stackblitz с тем, как выглядит ваш код прямо сейчас stackblitz.com   -  person igg    schedule 27.03.2020
comment
Моя проблема в том, что у меня есть локальный API   -  person omar bouhajja    schedule 27.03.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать метод 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;
       }

где ключ — свойство объекта, в котором выполняется поиск. Итак, если массив таблиц имеет эти два объекта:

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

если ключ - это имя, а ваш ключ поиска - аля, он найдет:

{"name:"ala,"age:"15,"father:ihab"}
person FedMice    schedule 27.03.2020