Question

我的Angular项目遇到了问题。我有一个卡阵列，每个卡组件将具有在该组件中传递的卡详细信息。问题来自拖放模块。

实际上，当我将卡片放到容器中时，CdkDragDrop接口返回的ID始终是原始容器（“手动播放器”）的ID。

我是该界面的新手，它是否需要某些东西才能放置容器？问题是否出自我的cdkDrag声明？

我的“手动播放器”组件的HTML代码：

<div id="hand-player" cdkDropList (cdkDropListDropped)="drop($event)">
<div id = "for" *ngFor="let a of array" cdkDrag>
        <app-carte [carte]="a"></app-carte>
</div>

我的“手动播放器”组件的TS代码：

import { Component, OnInit, Host, Input } from '@angular/core';
import {CarteComponent} from '../carte/carte.component';
import {Carte} from '../../interfaces/carte';
import { GameComponent } from '../game.component';
import { CdkDragDrop } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-hand-player',
  templateUrl: './hand-player.component.html',
  styleUrls: ['./hand-player.component.css'],
})
export class HandPlayerComponent{

  public array:Carte[];

  constructor(@Host() public game: GameComponent){
    this.array = game.joueur.etatMain;
  }

  drop(event: CdkDragDrop<Carte[]>){
    console.log(event.container.id);
  }

}

我的应用程序组件：

<div>

    <div id="hand-opponent">
        <app-hand-opponent></app-hand-opponent>
    </div>

    <div id="opponent">
        <app-profile [joueurProfil] = false></app-profile>
    </div>

    <div id="deck">
        <app-deck></app-deck>
    </div>

    <div id="stats">
        <app-infos-game></app-infos-game>
    </div>

    <div id="board-player">
        <app-board-player></app-board-player>
    </div>

    <div id="profile">
        <app-profile [joueurProfil] = true></app-profile>
    </div>

    <div id="board-opponent">
        <app-board-opponent></app-board-opponent>
    </div>

    <div id="hand-player">
        <app-hand-player></app-hand-player>
    </div>

</div>

如果我将卡放到该容器中，我希望通过界面返回id：“ board-player” ...

事件容器的ID不变-角度拖放材料

0 个答案: