cdk-drop不是一个已知的元素

Question

我正在使用Angular 7的新功能“拖放”，我按照官方文档上的所有步骤进行操作： https : //material.angular.io/cdk/drag-drop/overview

但我收到此错误：**

未捕获的错误：模板解析错误：'cdk-drop'不是已知元素：1.如果'cdk-drop'是Angular组件，则请验证它是否属于此模块。 2.如果“ cdk-drop”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

**

这是我的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);
    }
}

注意：我正在使用=>角度：7.1.2＆如果我通过div更改cdk-drop html元素，也无法正常工作:(

Answer 1

您阅读的文档必须已过时。 我关注了一个博客文章，并遇到了同样的问题。

元素<cdk-drop>不再存在。 而是使用指令cdkDropList。

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

到目前为止，此示例适用于https://stackblitz.com/angular/moyomqpeprev?file=app%2Fcdk-drag-drop-sorting-example.html

Answer 2

在您的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>