cdk-drop 不是已知元素

Question

我正在使用 Angular 7 的新功能 "Drag and Drop" 我遵循了官方文档中的所有步骤：https://material.angular.io/cdk/drag-drop/overview

但我收到此错误： **

Uncaught Error: Template parse errors: 'cdk-drop' is not a known element: 1. If 'cdk-drop' is an Angular component, then verify that it is part of this module. 2. If 'cdk-drop' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

**

这是我的 app.component.html 代码：

<cdk-drop cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}} 
  </div>
</cdk-drop>

这是我的 app.component.ts 代码：

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
    ];

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

注意：我正在使用 => Angular：7.1.2 ＆如果我通过 div 更改 cdk-drop html 元素也不起作用:(

Answer 1

在你的 app.module.ts 你应该

import {DragDropModule} from '@angular/cdk/drag-drop';

然后在同一文件的 imports 数组（在 @NgModule 装饰器中）添加 DragDropModule。

@angular/material 中也没有导出任何内容，因为 cdk-drop 将您的 html 部分更改为：

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

Answer 2

您阅读的文档一定是过时的。我关注了一个博客 post 并遇到了同样的问题。

元素 <cdk-drop> 已不存在。改为使用指令 cdkDropList。

当出现奇怪的错误时，请务必先检查最新的文档。

截至今天，此示例有效 https://stackblitz.com/angular/moyomqpeprev?file=app%2Fcdk-drag-drop-sorting-example.html

cdk-drop 不是已知元素

cdk-drop is not a known element

javascript

drag-and-drop

drag

angular

angular7