html - NG8002: Kan inte binda till 'cdkDropListData' eftersom det inte är en känd egenskap hos 'table'

Jag får detta fel "NG8002: Kan inte binda till 'cdkDropListData' eftersom det inte är en känd egenskap för 'table'." och varje lösning jag ser online är bara "lägg till det i modulen" men det är redan i modulen så jag förstår helt enkelt inte varför jag får detta fel.

Jag får också en varning som jag antar är relaterad eftersom det är en importerad modul som inte blir "sedd": NG8103: *ngFor-direktivet användes i mallen, men varken NgFor-direktivet eller CommonModule importerades. Använd Angul ar:s inbyggda kontrollflöde @for eller se till att antingen NgFor-direktivet eller CommonModule inkluderas i @Component.imports-arrayen för denna komponent.

Jag undrar om det är något på gång med hur mina importer är strukturerade? Jag är medveten om att de är något överflödiga vid det här laget, men det är ett resultat av att ha försökt om och om igen för att få det att känna igen dessa importer.

här är min appmodul

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppComponent } from './app.component';
import { CarrierComponent } from './entities/carrier.component'; // import it directly
import { NgForOf, CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    CarrierComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    DragDropModule,
    NgForOf
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

appkomponent html

<div class="container mt-5">
  <div *ngFor="let carrier of carriers" class="card bg-secondary mx-auto mb-2">
    <div class="card-body table-container">
      <div class="row">
        <div class="col-xl-8">
          <h2>{{ carrier.name }}</h2>
        </div>
        <div class="col-xl-4">
          <h2 class="total-size">{{ carrier.getCurrentTotal() }} / {{ carrier.capacity }}</h2>
        </div>
      </div>
      <div class="table-responsive mb-0 pb-0" style="font-size: 20px;">
        <table cdkDropList [cdkDropListData]="carrier.items" (cdkDropListDropped)="onDrop($any($event), carrier)" class="table table-hover">
          <thead>
          <tr>
            <th class="bg-info bg-opacity-25">Item</th>
            <th class="bg-info bg-opacity-25">Size</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of carrier.items" cdkDrag class="bg-info bg-opacity-25">
            <td>{{ item.name }}</td>
            <td>{{ item.size }}</td>
          </tr>
          </tbody>
          <tbody>
          <tr *ngFor="let container of carrier.containers" cdkDrag class="bg-info bg-opacity-25">
            <td>{{ container.name }}</td>
            <td>{{ container.getCurrentTotal() }} / {{ container.capacity }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

och app-komponent ts:

import { Component, OnInit } from '@angular/core';
import { EXAMPLE_CARRIERS } from './example.data';
import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import { Item } from './entities/item';
import { Carrier } from './entities/carrier';
import {Container} from './entities/container';
import {NgFor, CommonModule} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  carriers = EXAMPLE_CARRIERS;

  // Handles the drop event when items are moved between carriers
  onDrop(event: CdkDragDrop<Item[], any>, target: Carrier | Container) {
    const movedItem = event.item.data;
    const sourceContainer = event.previousContainer.data;

    const itemIndex = sourceContainer.findIndex((item: any) => item.id === movedItem.id);
    sourceContainer.splice(itemIndex, 1);

    if (target instanceof Carrier) {
      target.items.push(movedItem);
    } else {
      target.items.push(movedItem);
    }
  }

  ngOnInit() {}
}

Vad gör jag för fel här? Jag är ny på Angular och detta får mig att vilja rycka mitt hår.

REDIGERA: main.ts som efterfrågats i kommentarerna:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Svar #1

Du använder fristående metodik så du behöver lägga till importerna på själva komponenten framöver. Jag tror att du använder Angular 19, så kör Angular-migrationsskriptet för att konvertera dina komponenter till fristående.

Angular fristående migrering

Anatomi av en komponent

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [
    CommonModule,
    DragDropModule,
  ],
})
export class AppComponent implements OnInit {
  ...

När migreringen är slutförd kommer du inte att behöva appmodulen längre, det finns också en migrering för det för att bli av med moduler, efter att ha gått över till fristående.