cdkDropListDropped никогда не запускался в angular 10 и таблице материалов

Я использовал cdkDropList для изменения порядка столбцов в таблице материалов.

До версии 8 все шло нормально, но после обновления до версии 10 cdkDropListDropped никогда не запускается.

<table mat-table #table [dataSource]="dataSource" 
  cdkDropListGroup>
      <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
          <th mat-header-cell layout-align="start center" class="centered" *matHeaderCellDef
              cdkDropList
              cdkDropListLockAxis="x"
              cdkDropListOrientation="horizontal"
              (cdkDropListDropped)="dropListDropped($event, colIndex)"
              cdkDrag
              (cdkDragStarted)="dragStarted($event, colIndex)"
              [cdkDragData]="{name: disCol.field, columIndex: colIndex}">
            {{disCol.field}}
          </th>
          <td mat-cell layout-align="start center" class="centered" *matCellDef="let row " > {{row[disCol.field]}}
          </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
        style="pointer-events: none;"
        >
      </tr>
    </table>

Похоже, что cdkDropList и cdkDrag нельзя было включить в один и тот же тег.

Кто-нибудь имеет представление о том, что происходит?

Stackblitz с угловым 8

Stackblitz с угловым 10


angular angular-material angular10 angular-cdk
person Konrad Czerwinski    schedule 21.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это

<table mat-table #table [dataSource]="dataSource" cdkDropListOrientation="horizontal"
       cdkDropList  (cdkDropListDropped)="drop($event)">
  <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
    <th mat-header-cell layout-align="start center" class="centered" *matHeaderCellDef
        cdkDropList
        cdkDropListLockAxis="x"
        cdkDropListOrientation="horizontal"
        (cdkDropListDropped)="dropListDropped($event, colIndex)"
        cdkDrag
        (cdkDragStarted)="dragStarted($event, colIndex)"
        [cdkDragData]="{name: disCol.field, columIndex: colIndex}">
      {{disCol.field}}
    </th>
    <td mat-cell layout-align="start center" class="centered" *matCellDef="let row " > {{row[disCol.field]}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      style="pointer-events: none;"
  >
  </tr>
</table>

и в .ts

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
  }

и в You .ts добавьте это

import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
person Tomasz Vizaint    schedule 21.07.2020
comment
Да, это сработало. Я также удалил дублированный cdkDropList. Вы знаете, почему это не работает с dropListGroup? - person Konrad Czerwinski; 22.07.2020
comment
Из документации Вы можете соединить один или несколько экземпляров cdkDropList вместе, установив свойство cdkDropListConnectedTo или заключив элементы в элемент с помощью атрибута cdkDropListGroup. - person Tomasz Vizaint; 22.07.2020