Angular泛型表多列过滤自定义filterPredicate

Question

我想创建将 tableColumns 和 dataSource 作为 @Input() 的通用表。我希望能够按每个表列添加自定义过滤。目前我已经设法初始化表 FormGroup 并获取我想要过滤的 FormGroup 值，但从这里开始我真的不知道如何继续。我尝试实现管道并查看互联网上的其他类似解决方案，但他们都假设我知道我的 tableColums 是什么（我不知道，因为我正在动态创建它们。

这是我的代码

    <table mat-table [dataSource]="dataSource">
  <ng-container *ngFor="let col of tableColumns; let i = index" [matColumnDef]="col.key">
    <ng-container>
      <th class="header" mat-header-cell *matHeaderCellDef>
        <span *ngIf="!col.config">
          {{ col['display'] }}
        </span>
        <form [formGroup]="form">
          <mat-form-field *ngIf="!col.config" class="filter">
            <input matInput placeholder="Filter" formControlName="{{tableColumns[i].key}}">
          </mat-form-field>
        </form>

      </th>
      <td mat-cell *matCellDef="let element; let row"> 
        <ng-container>
          {{ element[col.key] }}
        </ng-container>   
      </td>
    </ng-container>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="keys"></tr>
  <tr mat-row *matRowDef="let row; columns: keys"></tr>
</table>

然后在我的 ts 文件中我有以下内容：

  @Input() tableColumns: GenericTableColumn[] = []
  @Input() dataSource: Array<object> = []

  ngOnInit(): void {
    this.initFormControls()
    this.registerFormChangeListener()
  }

  initFormControls() {
    const formGroup: FormGroup = new FormGroup({})
    this.tableColumns.forEach((column) => {
      if (column.key !== 'actions') {
        let control: FormControl = new FormControl('')
        formGroup.addControl(column.key, control)
      }
    })
    this.form = formGroup
  }

我的想法是创建另一个函数，将我的 dataSource 输入转换为 MatTableDataSource 并应用自定义过滤谓词。像这样的东西：

  registerFormChangeListener(){
    const tableDataSource = new MatTableDataSource(this.dataSource)
    tableDataSource.filterPredicate((tableDataSource, filter) => {
         // here I need to filter by object key value
        })
      }



my dataSource = {
{
    "id": "1",
    "name": "someValue1",
    "someOtherKey": "someOtherValue"

},
{
    "id": "2",
    "name": "someValue2",
    "someOtherKey": "someOtherValue2"
},
{
    "id": "3",
    "name": "someValue3",
    "someOtherKey": "someOtherValue2"
}
}

my filter object that is actually value of my form is: 

{
    "id": "",
    "name": "someValue1",
    "someOtherKey": "someOtherValue2"
}

and I am hoping to get my result as:

const fitleredResults = [
{
    "id": "1",
    "name": "someValue1",
    "someOtherKey": "someOtherValue"

},
{
    "id": "2",
    "name": "someValue2",
    "someOtherKey": "someOtherValue2"
}
]

感谢您的帮助！

Answer 1

您需要了解自定义过滤器功能如何工作

1. MatTableDataSource 有一个属性：

   filter

   它是一个字符串
2. customFilter 函数是一个以接收作为参数的函数， 数组的每个元素都是一个“字符串”，您返回 true 或 假

当我们有几个字段要过滤时，您可以使用 JSON.stringify 生成“字符串”并使用 JSON.parse 恢复对象

也许这个SO可以作为灵感