html - NG8002: 'table' bilinmeyen bir özellik olduğu için 'cdkDropListData'ya bağlanılamıyor

Bu hatayı alıyorum: "NG8002: 'cdkDropListData'ye bağlanamıyor çünkü bu, 'table' için bilinen bir özellik değil." ve internette gördüğüm her çözüm sadece "modüle ekle" diyor ama zaten modülde var, bu yüzden neden bu hatayı aldığımı hiç anlamıyorum.

aynı zamanda, görünmeyen bir ithal modül ile ilgili olduğunu düşündüğüm bir uyarı alıyorum: NG8103: Şablonda *ngFor yönergesi kullanıldı, ancak ne NgFor yönergesi ne de CommonModule içe aktarılmıştı. Angular'ın yerleşik kontrol akışı @for'u kullanın veya NgFor yönergesinin veya CommonModule'un bu bileşenin @Component.imports dizisine dahil edildiğinden emin olun.

İthalat yapımın yapılandırılma şekliyle ilgili bir sorun olup olmadığını merak ediyorum? Şu anda biraz gereksiz olduklarının farkındayım ama bu, bu ithalatları tanıması için defalarca denemem sonucu oluştu.

işte benim uygulama modülüm

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

uygulama bileşeni 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>

ve uygulama bileşeni 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() {}
}

Burada neyi yanlış yapıyorum? Angular'a yeniyim ve bu beni saçımı yolmak istememe neden oluyor.

DÜZENLEME: yorumlarda istendiği gibi main.ts:

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

Cevap #1

Bağımsız bir yöntem kullanıyorsunuz, bu yüzden ileride bileşene importları eklemeniz gerekiyor, bence Angular 19 kullanıyorsunuz, bu yüzden bileşenlerinizi bağımsız hale dönüştürmek için Angular geçiş betiğini çalıştırın.

Angular Bağımsız Geçiş

Bir bileşenin anatomisi

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

Göç tamamlandıktan sonra. Artık uygulama modülüne ihtiyacınız olmayacak, modüllerden kurtulmak için de bir göç mevcut, bağımsız hale geçtikten sonra.