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);
    }
}

注意：我正在使用 => Angular: 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数组（装饰器内）中添加.@NgModuleDragDropModule

此外，将html 部分更改为@angular/material：cdk-drop

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