无法使用库中的cdkDropConnectedTo属性

时间:2019-07-19 10:04:42

标签: angular drag-and-drop angular-cdk

以下是我的代码,我已将其添加到html中以在项目文件夹中进行拖放功能。那就是我已经使用cli命令ng generate library some-lib

创建了库
    <div cdkDropList cdkDrop  [cdkDropConnectedTo]="otherProgramItems" [cdkDropData]="progItem.items" (cdkDropListDropped)="droppedMenu($event)">
        <div class="progressLabel">{{progItem.name}}</div>
        <input class="taskName" [(ngModel)]="name" type="text" (keyup.enter)="creatingTask(progItem.name)"/>
        <div class="tasks" cdkDrag *ngFor="let tasks of progItem.items; let i = index">
            <span class="task-pointer" (click)="editMode=true;currentOpenIndex=i" *ngIf="!editMode || (editMode && currentOpenIndex !== i)">{{tasks.name}}</span>
            <input *ngIf="editMode && currentOpenIndex===i" (blur)="editMode=false;currentOpenIndex=null;saveChange();" (keyup.enter)="editMode=false;currentOpenIndex=null;saveChange();" type="text" [(ngModel)]="tasks.name"/>
            <mat-icon class="delete" (click)="deleteFromArray(progItem.items,i)" >delete</mat-icon></div>
    </div>

上面的代码将错误提示为 无法绑定到“ cdkDropConnectedTo”,因为它不是“ div”的已知属性。 以及无法绑定到“ cdkDropData”,因为它不是“ div”的已知属性。

下面是我在lib文件夹中的modile.ts文件

import { NgModule } from '@angular/core';
import { TileComponent } from './tile/tile.component';
import {
  DragDropModule
} from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [TileComponent],
  imports: [
    DragDropModule
  ],
  exports: [TileComponent]
})

1 个答案:

答案 0 :(得分:0)

您可能在模板中输入了错误。没有cdkDropConnectedTo指令属性,但是有cdkDropListConnectedTo ...