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

Posted 2023-05-08

【中文标题】在 Angular 中使用 cdkDropListData 时出错，我无法绑定到“cdkDropListData”，因为它不是“div”的已知属性

【英文标题】：Error when using cdkDropListData in Angular gives me Can't bind to 'cdkDropListData' since it isn't a known property of 'div'

【发布时间】：2020-11-25 07:23:00

【问题描述】：

<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.firstNamegirls_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 
  

【问题讨论】：

你是在module.ts中导入CdkDragDrop还是DragDropModule？ （第二个是正确的，第一个必须在组件中导入。）

我建议您在导入新内容时查看文档以了解需要哪些导入。对于 Angular Material，您可以在 API 选项卡中查看相应的模块导入，并在示例中查看其他导入：material.angular.io/cdk/drag-drop/overview

是的，我已经在组件中导入了 CdkDragDrop，在 module.ts 文件中导入了 DragDropModule

请添加您是如何进行这些导入的，因为您收到的错误通常与缺少/错误的导入有关（或导出某些内容在子模块中声明/导入）。

@GunnarB。好的，让我添加这些导入文件。

【参考方案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 应该只在模块级别导入，而不是在组件级别。

另外，正如我在 cmets 中提到的： 看起来您的 StudentSelector 与您的 ModelModule 位于不同的模块中（至少它不是您提供的声明的一部分）。一个组件只能在声明它的模块中使用（declarations-list）或导入另一个模块，该模块反过来声明该组件并导出它（exports-list）。

【参考方案2】：

在你的应用模块中导入这个

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

然后重新运行应用程序。

【参考方案3】：

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

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

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

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