在 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”的已知属性。

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

我已经在 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（至少它不是您提供的声明的一部分）。组件只能在声明它的模块中使用（声明列表），或者导入另一个模块，该模块反过来声明该组件并导出它（导出列表）。