如何为每个列创建具有通用过滤器的通用表

Question

我想为每个列实现一个带有通用过滤器的通用表。

在线我找到了这个例子：

https://stackblitz.com/edit/angular-f3mmmp?file=src%2Fapp%2Fapp.component.ts

，但是在此示例中，整个表都是硬编码的。

我只是修改了此示例中的代码：

HTML如下：

<ng-container *ngIf="dataSource">
  <table
    mat-table
    [dataSource]="dataSource"
    class="mat-elevation-z8"
    class="generic-table"
  >
    <ng-container *ngFor="let colName of displayedColumns">
      <ng-container matColumnDef="{{ colName }}">
        <th mat-header-cell *matHeaderCellDef class="{{ headerClasses }}">
          <ng-container *ngIf="!isFilterAvailable">
            {{ colName }}
          </ng-container>
          <ng-container *ngIf="isFilterAvailable">
            <mat-form-field class="filter" floatLabel="never">
              <mat-label>Search</mat-label>
              <input matInput [formControl]="colName" />
            </mat-form-field>
          </ng-container>
        </th>
        <td
          mat-cell
          *matCellDef="let cellData"
          class="{{
            cellData[colName]
              | customPipeChecks: colName:cellData:customCssFunction
          }}"
          innerHtml="{{
            cellData[colName]
              | customPipeChecks: colName:cellData:customValueFunction
          }} "
        ></td>
      </ng-container>
    </ng-container>

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

，然后要创建3个方法 在此示例中，我发现对于每个队列，过滤器都定义了formControl

 nameFilter = new FormControl('');
  idFilter = new FormControl('');
  colourFilter = new FormControl('');
  petFilter = new FormControl('');

问题在于如何动态地初始化新的FormControl？

最好的问候，

狮子座