向垫子表添加额外的行

Answer 1

为了解决这个问题，我设法通过删除

*ngFor

并手动放入过滤器来做到这一点。

<mat-table class="table"
           cdkDropList
           cdkDropListOrientation="horizontal"
           (cdkDropListDropped)="tableDrop($event)"
           [dataSource]="tableDataSource">
  <ng-container matColumnDef="param1">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     cdkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row"
                     [cdkDragStartDelay]="100">
      Param1
      <mat-form-field class="filterField">
        <input matInput
               type="number"
               (keydown)="updateManualPage(1)"
               placeholder="Filter"
               formControlName="filterParam1">
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <span>{{data.param1}}</span>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="param2">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     cdkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row"
                     [cdkDragStartDelay]="100">
      Param2
      <mat-form-field class="filterField">
        <input matInput
               (keydown)="updateManualPage(1)"
               placeholder="Filter"
               formControlName="filterParam2"
               [matAutocomplete]="autoSingleSelect">
        <mat-autocomplete #autoSingleSelect="matAutocomplete"
                          class="filterSelect"
                          panelClass="filterSelect">
          <mat-option *ngFor="let option of dropdownSingleFilteredOptions | async"
                      [value]="option.param2">
            {{option.param2}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <span>{{data.param2}}</span>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="param3">
    <mat-header-cell *matHeaderCellDef
                     cdkDrag
                     cdkDragLockAxis="x"
                     cdkDragBoundary="mat-header-row"
                     [cdkDragStartDelay]="100">
      Param3
      <mat-form-field class="filterField">
        <mat-select class="filterMultiselect"
                    placeholder="Filter"
                    formControlName="filterParam3"
                    multiple
                    panelClass="filterMultiselect">
          <mat-option *ngFor="let option of tableDataSource.data"
                      [value]="option.param3">
            {{option.param3}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-header-cell>
    <mat-cell *matCellDef="let data">
      <span>{{data.param3}}</span>
    </mat-cell>
  </ng-container>

  <mat-header-row class="tableHeader"
                  *matHeaderRowDef="tableDisplayedColumns"
                  #tableHeaderRow>
  </mat-header-row>
  <mat-row class="tableRow"
           *matRowDef="let row; columns: tableDisplayedColumns;"
           [class.selected-row]="tableSelectedRows.has(row)"
           (click)="selectUnselectRow(row)">
  </mat-row>
</mat-table>