角材料拖放不起作用

Question

我正在尝试创建一个页面，让用户看到可以添加到页面的传统项目列表。然后，他们将一个项目拖放到所需的位置。我无法弄清楚我在下面的代码中做错了什么。我可以拖动按钮项，可以限制可以拖动这些项的位置，但是它不会识别出它已被拖放。

<div class="page-layout simple fullwidth">

    <div id="mainColumn">

        <div id="docColumn"
             cdkDropListGroup>

            <h1 class="pt-28 text-center">{{fileData.name}}</h1>



            <!-- The add item row -->
            <div fxLayout = "row"
                 class="mb-20 mt-40 mb-40"
                 style="position:fixed; top:50px; margin:0px 50px 0px 10px">


                <button mat-fab 
                        id="addItem"
                        color="warn" 
                        aria-label="Example icon button with a home icon"
                        matTooltip="Add Item"
                        matTooltipPosition="below"
                        (click)="addOptionDisplay=!addOptionDisplay">
                    <mat-icon class="">add</mat-icon>
                </button>

                <div id="addOptions"
                     *ngIf="addOptionDisplay"
                     fxLayout="column"
                     style="position:relative; right:20px">


                    <div fxLayout="row">

                        <div *ngFor="let cbutton of addButtons"
                                mat-mini-fab 
                                color="#2D323E"
                                aria-label="Add Text Item"
                                matTooltip="{{cbutton.toolTip}}"
                                class="ml-28 mt-8"
                                matTooltipPosition="above"
                                cdkDrag
                                [cdkDragData]="cbutton"
                                cdkDragBoundary="#docColumn">
                            <mat-icon>{{cbutton.icon}}</mat-icon>
                        </div>

                    </div>

                </div>


            </div>
            <!-- / The add item row -->




            <!-- The document -->
            <div id="docItems">

                <div *ngFor="component of componentData"
                    cdkDropList
                    [cdkDropListData]="component"
                    (cdkDropListDropped)="dropItem($event)"
                    style="width:100%; height:25px; background-color:#ccc; padding:20px 0px">
                    Here
                </div>

            </div>
            <!-- / The document -->


        </div>

    </div>


</div>