typescript - Feil når jeg bruker cdkDropListData i Angular gir meg Kan ikke binde til 'cdkDropListData' siden det ikke er en kjent egenskap av 'div'

<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>
</div>

Når jeg bruker [cdkDropListData] her, får jeg en feil på konsollen som sier Kan ikke binde til 'cdkDropListData' siden det ikke er en kjent egenskap for 'div'.

Jeg er ny på Angular, så vær så snill å unngå nybegynneratferd

Jeg har allerede importert CdkDragDrop i module.ts

Dette er komponentfilen.

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);
  }
}

Her er modulfilen.

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 {
  
}

Svar #1

Importene bør være slik:

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 {
  
}

og (se notater i koden)

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 {
  ...
}

Generelt:
xxxModule bør kun importeres på modulnivå, ikke på komponentnivå.

Også, som jeg nevnte i kommentarene:
Det ser ut til at din StudentSelector er i en annen modul enn din ModelModule (i det minste er den ikke en del av deklarasjonene du oppga). En komponent kan kun brukes i modulen som deklarerer den (declarations-liste) ELLER som importerer en annen modul som til gjengjeld deklarerer komponenten og eksporterer den (exports-liste).

Svar #2

  1. Mest sannsynlig kan problemet være at riktig modul ikke blir importert.
  • import { DragDropModule} from '@angular/cdk/drag-drop';
  1. Likevel, hvis noen står overfor dette problemet, betyr det at du ikke har deklarert komponenten din i noen av modulene dine (f.eks.: App.module.ts) fordi denne egenskapen krever moduldeklarasjon.
  • (F.eks: Hvis noen åpner en komponent ved bruk av ComponentFactoryResolver, trenger det ikke å erklæres i app.module, men for å bruke '[cdkDropListData]', må du erklære det i app.module)

Relaterte artikler