cdkDropListDropped = "drop ($ event)" не запускается, таблица матов с источником данных - PullRequest
Новая
       54

cdkDropListDropped = "drop ($ event)" не запускается, таблица матов с источником данных

0 голосов
/ 17 апреля 2020

Я надеюсь, что вы все в безопасности в это время.

Это ситуация, в которой я оказался, мне нужно сделать функцию перетаскивания столбца с помощью mat-table и cdkDragDrop из Angular (работа с Angular 8).

Вот что у меня есть.

Внутри компонента. 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);
  }

}

Это всего лишь простой тестовый код, который мне удалось найти на inte rnet Пример на stackblitz, который я нашел Проблема в том, что я не могу удалось получить строку (cdkDropListDropped)="drop($event)" для запуска события в функции "drop" в ts. Я попробовал функционал без таблицы, и он работает, он запускает событие (и функцию «перетаскивания»), но внутри таблицы он не работает.

Интересно, у кого-нибудь из вас, ребята, была подобная проблема, и если вы удалось решить проблему.

Заранее спасибо.

...