Таблица FilterPredicate по Colomn с угловым материалом

Question

Я бы хотел отфильтровать результаты таблицы матов по столбцам, используя фильтр предикатов.Я уже использую простой фильтр, но он фильтрует все данные во всех столбцах.Я ищу похожие темы, но не знаю, как их использовать.Я пытаюсь повторить мой код для всех столбцов, но не работает ..

См. Код ниже:

<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>

и мои .ts :

export class MynewComponent implements OnInit {
    dataSource = new MatTableDataSource();
    displayedColumns = ['aa', 'bb'];
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor(private materialService: MaterialService) {}

    ngOnInit() {
        this.materialService.getUser().subscribe(value =>{this.dataSource.data = value;});
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    }

    applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
        this.dataSource.filter = filterValue;
        if (this.dataSource.paginator) {
            this.dataSource.paginator.firstPage();
        }
    }
}

export class UserDataSource extends DataSource<any> {
    constructor(private materialService: MaterialService) {
        super();
    }

    connect(): Observable<MaterialModel[]> {
        return this.materialService.getUser();
    }

    disconnect() {}
}

Answer 1

HTML Добавить 7 полей ввода различий также в applyFilter передать значение ввода и ключ этого столбца в виде строки

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'aa')" placeholder="Filter">
</mat-form-field>

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'bb')" placeholder="Filter">
</mat-form-field>

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'col3')" placeholder="Filter">
</mat-form-field>

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'col4')" placeholder="Filter">
</mat-form-field>

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'col5')" placeholder="Filter">
</mat-form-field>

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'col6')" placeholder="Filter">
</mat-form-field>

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value, 'col7')" placeholder="Filter">
</mat-form-field>

Youможно найти другие способы написания HTML в соответствии с вашими требованиями к дизайну.

компонент

Создать фильтр obj, имеющий key: ключ столбца &value: значение фильтра

filterObj = {};
applyFilter(filterValue: string, key: string) {
    this.filterObj = {
        value: filterValue.trim().toLowerCase(),
        key: key
    }
    this.dataSource.filter = filterValue;
    if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
    }
}

обновление filterPredicate как:

this.dataSource.filterPredicate = (data, filter) => {
    if(data[this.filterObj['key']] && this.filterObj['key']) {
        return data[this.filterObj['key']].toLowerCase().includes(this.filterObj['value']);
    }
    return false;
}