在 Angular 中使用 cdkDropListData 时出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性

Question

<div
                      cdkDropList
                      #girlList="cdkDropList"
                      [cdkDropListData]="girls"
                      [cdkDropListConnectedTo]="[convaList]"
                      class="example-list"
                      (cdkDropListDropped)="drop($event)"><div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag>
                      <div class="card-body p-2 justify-content-between align-items-center d-flex">
                        <span class="reading-grade font-weight-bold">{{girls_data.id}}</span>
                        <div class="student-grade flex flex-grow-1">
                          <p class="justify-content-between align-items-center d-flex">
                            <span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span>
                            <span>{{girls_data.gender}}</span>
                          </p>
                          <p class="justify-content-between align-items-center d-flex">
                            <span>{{girls_data.currentAcademicYear}}</span>
                            <span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip" aria-hidden="true"></i></span>
                          </p>
                        </div>
                        <span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span>
                      </div>
                    </div>

使用 [cdkDropListData] 时，控制台上出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性。

我是 Angular 新手，所以请避免新手行为

我已经在 module.ts 中导入了 CdkDragDrop

这是组件文件。

import {Component, NgModule} from '@angular/core';
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import {CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';


@Component({
  selector: 'student-selector',
  templateUrl: 'studentSelector.component.html',
  styleUrls: ['./studentSelector.component.css']
})

export class StudentSelector {
  boys =  [];
  girls = [];
  constructor(private dataModel: StudentModel) {
    this.boys = dataModel.getStudents();
    this.girls = dataModel.getStudents();

  }
  get students(): Student[] {
    return this.dataModel.getStudents();
  }
  conva = [];
  
  drop(event : CdkDragDrop<string[]>){
    transferArrayItem(event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex);
  }
}

这是模块文件。

import {NgModule} from '@angular/core';
import { StudentModel } from './studentRepository.model';
import { SimpleDataSource } from './datasource.model';
import {DragDropModule} from '@angular/cdk/drag-drop';


@NgModule({
  providers: [StudentModel,SimpleDataSource],
  imports : [DragDropModule]
})

export class ModelModule {
  
}

Answer 1

导入应该是这样的：

import {NgModule} from '@angular/core';
import { StudentModel } from './studentRepository.model';
import { SimpleDataSource } from './datasource.model';
import {DragDropModule} from '@angular/cdk/drag-drop';


@NgModule({
  providers: [StudentModel,SimpleDataSource],
  imports : [DragDropModule]
})

export class ModelModule {
  
}

并且（参见代码中的注释）

import {Component} from '@angular/core';    <= NgModule removed
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';     <= DragDropModule removed


@Component({
  selector: 'student-selector',
  templateUrl: 'studentSelector.component.html',
  styleUrls: ['./studentSelector.component.css']
})

export class StudentSelector {
  ...
}

一般：
xxxModule 只能在模块级别导入，而不是在组件级别导入。

另外，正如我在评论中提到的：
看起来您的

StudentSelector

与您的

ModelModule

位于不同的模块中（至少它不是您提供的声明的一部分）。组件只能在声明它的模块中使用（声明列表），或者导入另一个模块，该模块反过来声明该组件并导出它（导出列表）。

Answer 2

将其导入您的应用程序模块中

import { DragDropModule} from '@angular/cdk/drag-drop';

然后重新运行应用程序。

Answer 3

1. 问题很可能是没有导入正确的模块。

• import { DragDropModule} from '@angular/cdk/drag-drop';

2. 不过，如果有人面临这个问题，则意味着您尚未在任何模块中声明您的组件（例如：

   App.module.ts

   ） 因为这个属性需要模块声明。

• （例如：如果有人使用

  ComponentFactoryResolver

  打开一个组件，那么它不需要在

  app.module

  中声明，但要使用'

  [cdkDropListData]

  '，则需要声明它

  app.module

  ）

Answer 4

这不是非常技术性的解决方案，但我遇到过一些事情。

1。在加载页面之前清除缓存（如果您通常不清除它）。有时会错过将数据获取到变量的情况。

2。修复当前页面中的运行时错误（可能在另一个块中但在同一页面中）。

但是我遇到了第一个问题。当我清除缓存时它起作用了。

Answer 5

确保在该

模块

中导入cdkDropListData，其中在其声明中导入相同的组件。

简单来说，想要使用

cdkDropListData

模块的组件必须是

imported

模块中。

现在声明部分中的相应组件和

cdkDropListData

在同一模块的导入部分

如果您的项目使用，例如，

shared.module.ts

您必须在其中导入和导出

cdkDropListData

现在您必须将共享模块导入到导入相应组件的同一模块中