angular - 类型 'Event' 缺少类型 'CdkDragDrop' 中的以下属性

Question

我在看 reorderable columns example在stackblitz上。
特别是我看到了html

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

我已经在 MytableComponent 中定义了 drop

export class MytableComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) table!: MatTable<MytableItem>;
  dataSource: MytableDataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name', 'dateOfBirth'];

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

  constructor() {
    this.dataSource = new MytableDataSource();
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  }
}

构建失败并出现错误

Error: src/app/mytable/mytable.component.html:5:35 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'CdkDragDrop<string[], string[]>'.
  Type 'Event' is missing the following properties from type 'CdkDragDrop<string[], string[]>': previousIndex, currentIndex, item, container, and
3 more.

Answer 1

只需导入 DragDropModule从 '@angular/cdk/drag-drop' 到组件的模块中可以解决问题。
顺便说一句:我也跟着 example on the Angular Material site并启用严格的类型检查。起初它看起来像是一个严格的类型检查问题，但它只是当您忘记导入模块时编译器产生的分散注意力的错误消息的另一个示例。我还没有目睹严格的类型检查导致组件损坏。