過濾器在 Angular 使用 FormArray 的材料可編輯表中不起作用

Question

我使用 angular 中的 FormArray 創建了一個 angular 墊表。 我還應用了過濾器和分頁。

但是當我搜索某些東西時，它無法正常工作。

有人可以幫我使過濾器工作嗎？

下面是工作演示項目鏈接

項目鏈接

表基本示例.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：

目前，它會在您搜索“霓虹燈”時顯示

它應該如下所示：

提前致謝。

Answer 1

經過大量搜索，我在 angular 墊表中創建了過濾器工作。

以下功能，我已添加到帶有 FormArray 示例的 mat-table 中：

1. 篩選
2. Go 到特定頁面。
3. 就地編輯到墊表中。
4. 添加新行。
5. 編輯現有行。
6. 刪除行。

這是項目Project-Link-Mat-Table 的鏈接