Question

我正在为一个表构建一个过滤器，这是component.ts的代码：

filterValue: string = '';
dataSour = new MatTableDataSource(this.dataSource)
  applyFilter (){
    
    this.dataSour.filter = this.filterValue.trim().toLowerCase();
    console.log(this.filterValue);
  }

dataSource 是包含加载到表中的信息的对象数组。这是html：

<mat-form-field (ngSubmit)="applyFilter()">
    <input class="form-control" name="filterValue" [(ngModel)]="filterValue" matInput matNativeControl placeholder="Filter">
</mat-form-field>




<div class="row">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">



        <!-- Position Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="a">
            <th mat-header-cell *matHeaderCellDef> Columna 1 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.a}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="b">
            <th mat-header-cell *matHeaderCellDef> Columna 2 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.b}} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="c">
            <th mat-header-cell *matHeaderCellDef> Columna 3 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.c}} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container *ngIf="dataSource.length > 0" matColumnDef="d">
            <th mat-header-cell *matHeaderCellDef> Columna 4 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.d}} </td>
        </ng-container>

        <ng-container *ngIf="dataSource.length > 0" matColumnDef="e">
            <th mat-header-cell *matHeaderCellDef> Columna 5 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.e}} </td>
        </ng-container>

        <ng-container *ngIf="dataSource.length > 0" matColumnDef="f">
            <th mat-header-cell *matHeaderCellDef> Columna 6 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.f}} </td>
        </ng-container>

        <ng-container *ngIf="dataSource.length > 0" matColumnDef="g">
            <th mat-header-cell *matHeaderCellDef> Columna 7 </th>
            <td mat-cell *matCellDef="let dataobj"> {{dataobj.g}} </td>
        </ng-container>

        <div *ngIf="dataSource.length > 0">
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </div>

    </table>
</div>

我没有收到任何错误，但过滤器不起作用，输入捕获信息，但过滤器对其执行任何操作。我希望你能帮助我。

Answer 1

我想，我已经为您找到了解决方案。发现了一些小错误，例如您试图在 applyFilter 中的 ngSubmit 上调用 mat-form-field。应用过滤器应该在 <intput> 标签中。所以你的代码应该如下所示=>
HTML：

<mat-form-field >
    <input class="form-control" name="filterValue"
          (ngModelChange)="applyFilter($event)" 
          [(ngModel)]="filterValue" matInput matNativeControl 
          placeholder="Filter">
</mat-form-field>

TS：

applyFilter(fV: string) {
    this.dataSource.filter = fV.trim().toLowerCase();
}

注意：检查演示链接Stackblitz Demo。

表格过滤器不起作用。角材料

1 个答案: