为什么我的 Angular Material 没有检测到列表中的掉落？

Question

抱歉，如果我的问题听起来很愚蠢，但我仍在学习 Angular。

我有一个游戏板网格，由我组件中的 number[][] 创建：

private getEmptyBoard(): number[][] {
    return Array.from({ length: 10 }, () => Array(10).fill(0));
  }

在我的组件视图中，我正在创建一个 cdkDrag 框和一个 table，其中每个 td 都是一个单独的列表：

<div class="example-boundary">
  <table>
    <tr *ngFor="let row of boardP1; let j = index">
      <td
        *ngFor="let col of row; let k = index"
        class="battleship-tile"
        cdkDropList
        #field="cdkDropList"
        (cdkDropListDropped)="onDrop($event)"
      >
        {{ "X" }}
      </td>
    </tr>
  </table>
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag></div>
</div>

并且 (cdkDropListDropped)="onDrop($event) 我想检测我的盒子在我的组件内的掉落：

onDrop(event: CdkDragDrop<string[]>) {
    console.log(event.container.data);
    console.log(event.previousIndex);
    console.log(event.currentIndex);
  }

但是我无法在 drop 上获取任何日志。为什么？

Answer 1

我遇到的问题是 cdkDropListData、cdkDropListConnectedTo

的使用不正确

正确的 TS 代码：

onDrop(event: CdkDragDrop<Array<ShipComponent>>) {
    console.clear();
    console.log(this.position);
    event.previousContainer.data[event.previousIndex].top =
      this.position.y -
      this.boardElement.nativeElement.getBoundingClientRect().y;
    event.previousContainer.data[event.previousIndex].left =
      this.position.x -
      this.boardElement.nativeElement.getBoundingClientRect().x;

    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }

    console.log("t: " + event.container.data[event.previousIndex].top);
    console.log("l: " + event.container.data[event.previousIndex].left);
    console.log("s: " + event.container.data[event.previousIndex].size);
    if (this.shipsElement.nativeElement) {
      console.log("top: " + this.shipsElement.nativeElement.style.top);
      console.log("left: " + this.shipsElement.nativeElement.style.left);
    }
  }

并在 HTML 代码中：

<div class="container">
    <div class="ships">
        <h2>Available ships: {{ this.list1.length }}</h2>
        <div class="droplist" cdkDropList #one="cdkDropList" [cdkDropListData]="list1" [cdkDropListConnectedTo]="[two]"
            (cdkDropListDropped)="onDrop($event)" cdkDropListSortingDisabled="true">
            Next:

            <ng-container *ngIf="list1.length > 0">
                <div cdkDrag [style.size]="50 * list1[0].size + 'px'">
                    <app-ship [size]="list1[0].size"></app-ship>
                </div>
            </ng-container>
        </div>
    </div>
</div>

<div class="example-boundary">
    <div class="droplist" cdkDropList #two="cdkDropList" [cdkDropListData]="list2" [cdkDropListConnectedTo]="[one]"
        (cdkDropListDropped)="onDrop($event)" cdkDropListSortingDisabled="true">
        <ng-container *ngFor="let ship of list2">
            <app-ship #ships [size]="ship.size" cdkDrag [style.top.px]="ship.top" [style.left.px]="ship.left">
            </app-ship>
        </ng-container>
        <div class="board">
            <div class="row" *ngFor="let row of boardP1">
                <div class="cell" *ngFor="let box of row" id="columns">
                    <button
            #bt
            mat-button
            class="bt-cell"
            (mouseover)="position = bt.getBoundingClientRect()"
          ></button>
                </div>
            </div>
        </div>
    </div>
</div>

为什么我的 Angular Material 没有检测到列表中的掉落？

Why my Angular Material does not detect drop on list?

angular-material

angular10