Angular material 为什么我的角材质没有检测到列表中的下降？

对不起，如果我的问题听起来很愚蠢，但我仍在学习

我有一个游戏板网格，由我的组件中的

number[][

创建：

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

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

在我的组件视图中，我正在创建一个

cdkDrag

框和一个表，其中每个

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>

---

但我在drop上找不到任何日志。为什么？

我遇到的问题是不正确地使用了

cdkDropListData

，

cdkdroplistedconnected to

正确的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);
    }
  }

onDrop（事件：CdkDragDrop）{
console.clear（）；
控制台日志（此位置）；
event.previousContainer.data[event.previousIndex].top=
这个。位置。y-
this.boardElement.nativeElement.getBoundingClientRect（）.y；
event.previousContainer.data[event.previousIndex]。左=
这个位置是.x-
this.boardElement.nativeElement.getBoundingClientRect（）.x；
if（event.previousContainer==event.container）{
moveItemInArray(
event.container.data，
event.previousIndex，
event.currentIndex
);
}否则{
转让协议(
event.previousContainer.data，
event.container.data，
event.previousIndex，
event.currentIndex
);
}
log（“t:+event.container.data[event.previousIndex].top”）；
log（“l:+event.container.data[event.previousIndex].left”）；
console.log（“s:+event.container.data[event.previousIndex].size”）；
if（this.shipsElement.nativeElement）{
log（“top:+this.shipsElement.nativeElement.style.top”）；
log（“左：+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>

可用船舶：{{this.list1.length}
下一步：