javascript - 过滤器在使用 FormArray 的 Angular Material 可编辑表中不起作用

问题描述

我已经使用 FormArray 在角度创建了一个角度垫表。我还应用了过滤器和分页。

但是当我搜索某些东西时，它无法正常工作。

有人可以帮我使过滤器工作吗？

下面是工作演示项目链接

表基本示例.ts

export class TableBasicExample implements OnInit{
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
 dataSource = new MatTableDataSource<any>();

  VOForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private _formBuilder: FormBuilder){}

  ngOnInit(): void {
    this.VOForm = this._formBuilder.group({
      VORows: this._formBuilder.array([])
    });

     this.VOForm = this.fb.group({
              VORows: this.fb.array(ELEMENT_DATA.map(val => this.fb.group({
                position: new FormControl(val.position),
                name: new FormControl(val.name),
                weight: new FormControl(val.weight),
                symbol: new FormControl(val.symbol),
                action: new FormControl('existingRecord'),
                isEditable: new FormControl(false),
                isNewRow: new FormControl(false),
              })
              )) //end of fb array
            }); // end of form group cretation

    this.dataSource = new MatTableDataSource((this.VOForm.get('VORows') as FormArray).controls);
    this.dataSource.paginator = this.paginator;

    const filterPredicate = this.dataSource.filterPredicate;
      this.dataSource.filterPredicate = (data: AbstractControl, filter) => {
        return filterPredicate.call(this.dataSource, data.value, filter);
      }
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
  
   applyFilter(event: Event) {
     debugger;
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

表基本示例.html

<div class="mat-elevation-z8">
<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field>

<form [formGroup]="VOForm" autocomplete="off">
    <ng-container formArrayName="VORows">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element; let i = index" [formGroup]="element"> 
      {{VOForm.get('VORows').value[i].position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element; let i = index" [formGroup]="element"> 
      <span [hidden]="VOForm.get('VORows').value[i].isEditable">
        {{VOForm.get('VORows').value[i].name}}
      </span>
      <mat-form-field style="width: 50px;"
        [hidden]="!VOForm.get('VORows').value[i].isEditable">
        <input matInput type="text" formControlName="name">
      </mat-form-field>
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element; let i = index" [formGroup]="element"> 
      <span [hidden]="VOForm.get('VORows').value[i].isEditable">
        {{VOForm.get('VORows').value[i].weight}}
      </span>
      <mat-form-field style="width: 50px;"
        [hidden]="!VOForm.get('VORows').value[i].isEditable">
        <input matInput type="text" formControlName="weight">
      </mat-form-field>
    </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element; let i = index"[formGroup]="element">
      <span [hidden]="VOForm.get('VORows').value[i].isEditable">
        {{VOForm.get('VORows').value[i].symbol}}
      </span>
      <mat-form-field style="width: 50px;"
        [hidden]="!VOForm.get('VORows').value[i].isEditable">
        <input matInput type="text" formControlName="symbol">
      </mat-form-field>

    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>
                </ng-container>
</form>
  <mat-paginator [pageSizeOptions]="[5, dataSource.data.length>8? dataSource.data.length:''  ]" showFirstLastButtons></mat-paginator>
</div>

编辑-1：

目前，它会在您搜索“霓虹灯”时显示

它应该如下所示：

提前致谢。

标签： javascriptangularmat-table

javascript - 过滤器在使用 FormArray 的 Angular Material 可编辑表中不起作用

问题描述

解决方案

推荐阅读