在 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 應該只在模塊級別導入，而不是在組件級別。

另外，正如我在評論中提到的：
看起來您的ModelModule與您的StudentSelector位於不同的模塊中（至少它不是您提供的聲明的一部分）。 組件只能在聲明它的模塊中使用（聲明列表）或導入另一個模塊，該模塊反過來聲明該組件並導出它（導出列表）。

Answer 2

在您的應用程序模塊中導入它

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

並重新運行應用程序。

Answer 3

這不是非常技術性的解決方案，但我面臨的事情很少。

1.在加載頁面之前清除緩存（如果您通常不清除它）。 有時它會錯過將數據提取到變量中。

2. 修復當前頁面的運行時bug（可能在另一個block但在同一個頁面）。

但是我遇到了第一個問題。 當我清除緩存時它起作用了。