cdkDropListDropped="drop($event)" 未触发，垫 table 与数据源

Question

这就是我遇到的情况，我需要使用 mat-table 和来自 Angular 的 cdkDragDrop（使用 Angular 8）制作列拖放功能。

这是我目前所拥有的。

在 component.html 我有：

<mat-table cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" [dataSource]="dataSource">

  <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.name">

    <mat-header-cell *matHeaderCellDef cdkDrag cdkDragLockAxis="x">
      {{column.title}}
    </mat-header-cell>

    <mat-cell *matCellDef="let element">{{ element[column.name] }}</mat-cell>

  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns" class="tableHeaderRow" #tableHeaderRow></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

在 component.ts 里面我有：

export class TestClass implements OnInit {
  displayedColumns = ['id', 'firstName', 'lastName', 'email', 'phoneNumber', 'address', 'points', 'Details'];
  .
  .
  .
  columns: any[] = [{
        name: 'id',
        title: 'Id'
      },
      {
        name: 'firstName',
        title: 'FirstName'
      },
      {
        name: 'lastName',
        title: 'LastName'
      },
      {
        name: 'email',
        title: 'Email'
      },
      {
        name: 'phoneNumber',
        title: 'PhoneNumber'
      },
      {
        name: 'address',
        title: 'Address'
      },
      {
        name: 'points',
        title: 'Points'
      },
      {
        name: 'Details',
        title: 'Details'
      },
    ]
    .
    .
    .
  drop(event: CdkDragDrop < any[] > ) {
    moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
  }

}

这只是我在网上找到的一个简单的测试代码Example on stackblitz I found 问题是，我无法让 (cdkDropListDropped)="drop($event)" 行在 ts 的“drop”函数中触发一个事件。我在没有 table 的情况下尝试了该功能并且它正在运行，它正在触发事件（和“drop”功能），但在 table 内，它不起作用。

不知道你们有没有遇到过类似的问题，你们有没有解决这个问题。

Answer 1

我在使用 Angular 9.1.12.

时遇到了同样的问题

我在 Angular 的早期版本中找到了这个示例，但使用相同的代码它对我不起作用 (stackblitz)。

所以我使用了这个解决方法（使整个 table 成为可丢弃的）并且它有效：

<table mat-table [dataSource]="tableDataSource" cdkDropList cdkDropListLockAxis="x"
    cdkDropListOrientation="horizontal" matSort
    (cdkDropListDropped)="dropListDropped($event)">
    <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
        <th mat-header-cell *matHeaderCellDef cdkDrag [cdkDragData]="{name: disCol.field, columIndex: colIndex}"
            mat-sort-header>
            {{disCol.field}}
        </th>
        <td mat-cell *matCellDef="let row "> {{row[disCol.field]}}
        </td>
    </ng-container>
   [...]
</table>

cdkDropListDropped="drop($event)" 未触发，垫 table 与数据源

cdkDropListDropped="drop($event)" is not firing, mat table with datasource

angular

angular-cdk-drag-drop