cdk-drop 不是已知元素

Posted 2023-05-08

【中文标题】cdk-drop 不是已知元素

【英文标题】：cdk-drop is not a known element

【发布时间】：2019-05-12 17:09:52

【问题描述】：

我正在使用 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);
    

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

【问题讨论】：

你的 NgModule 文件里有什么？

NgModule 文件？我没有同名的文件

检查我的答案，好像你忘记了那部分。

【参考方案1】：

您阅读的文档必须是过时的。我关注了一篇博文，遇到了同样的问题。

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

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

从今天开始，这个例子可以工作https://stackblitz.com/angular/moyomqpeprev?file=app%2Fcdk-drag-drop-sorting-example.html

【参考方案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>

【讨论】：

我仍然遇到同样的错误，我将 DragDropModule 添加到我的 app.modules.ts 文件中的导入中，还导入了 DragDropModule 在我的 app.component.ts 文件中

@SaidSOUALHI 将其导入app.module.ts 而不是app.component.ts

有两个导入，文件头部的导入和@NgModule 装饰器中的导入数组。你应该两个都做。

是的，我在文件的头部和导入的@NgModule 内部都做了这两个操作

@SaidSOUALHI 切断你的服务器并重新运行。