表格過濾器不起作用。 Angular材料

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

我想，我已經為你找到了解決方案。 發現了一些小錯誤，例如您嘗試在mat-form-field applyFilter上調用ngSubmit 。 應用過濾器應該在<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 。