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代码：

### density color plot 2D
reset session

# create some dummy datablock with some distribution
N = 1000
set table $Data
    set samples N
    plot '+' u (invnorm(rand(0))):(invnorm(rand(0))) w table
unset table
# end creating dummy data

stats $Data u 1:2 nooutput
XMin = STATS_min_x
XMax = STATS_max_x
YMin = STATS_min_y
YMax = STATS_max_y
XRange = XMax-XMin
YRange = YMax-YMin
XBinCount = 20
YBinCount = 20
BinNo(x,y) = floor((y-YMin)/YRange*YBinCount)*XBinCount + floor((x-XMin)/XRange*XBinCount)

# do the binning
set table $Bins
    plot $Data u (BinNo($1,$2)):(1) smooth freq # with table
unset table

# prepare final data: BinNo, Sum, XPos, YPos
set print $FinalData
do for [i=0:N-1] {
    set table $Data3
    plot $Data u (BinNumber = BinNo($1,$2),$1):(XPos = $1,$1):(YPos = $2,$2) every ::i::i with table
    plot [BinNumber:BinNumber+0.1] $Bins u (BinNumber == $1 ? (PointsInBin = $2,$2) : NaN) with table
    print sprintf("%g\t%g\t%g\t%g", XPos, YPos, BinNumber, PointsInBin)
    unset table
}
set print

# plot data
set multiplot layout 2,1
set rmargin at screen 0.85
plot $Data u 1:2 w p pt 7 lc rgb "#BBFF0000" t "Data"
set xrange restore # use same xrange as previous plot
set yrange restore
set palette rgbformulae 33,13,10
set colorbox
# draw the bin borders
do for [i=0:XBinCount] {
    XBinPos = i/real(XBinCount)*XRange+XMin
    set arrow from  XBinPos,YMin to XBinPos,YMax nohead lc rgb "grey" dt 1
}
do for [i=0:YBinCount] {
    YBinPos = i/real(YBinCount)*YRange+YMin
    set arrow from  XMin,YBinPos to XMax,YBinPos nohead lc rgb "grey" dt 1
}

plot $FinalData u 1:2:4 w p pt 7 ps 0.5 lc palette z t "Density plot"
unset multiplot
### end of code

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

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

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

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

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

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

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

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

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

2 个答案: