javascript - cdk-drop 不是已知元素

Question

我正在使用 Angular 7 的新功能“拖放”，我按照官方文档上的所有步骤进行操作: 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

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

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

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

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