Как создать универсальную таблицу с универсальными фильтрами для каждого столбца - PullRequest
Новая
       18

Как создать универсальную таблицу с универсальными фильтрами для каждого столбца

0 голосов
/ 16 мая 2019

Я хочу реализовать универсальную таблицу с универсальными фильтрами для каждого столбца.

онлайн Я нашел этот пример:

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?

С наилучшими пожеланиями,

Leo

...