Angular CDK DropList表格拖拽失效，需更新category.priority字段

问题分析 #

你的代码存在几个关键问题导致拖拽失效，同时无法正确更新priority字段：

• cdkDrag未绑定数据，导致event.item.data无法获取到分类项
• moveItemInArray调用错误，第一个参数应为数组而非categoryId
• 直接操作categoryList Observable而非实际数组
• Priority设置从0开始，不符合你需要的1、2...排序规则

修复步骤 #

1. 修改HTML模板 #

给cdkDrag绑定分类数据，同时配置cdkDropList的数据源和拖拽方向：

<table class="normal_table white" nzTemplateMode>
    <thead>
        <tr>
            <th>Category</th>
            <th>Items</th>
            <th>Action</th>
        </tr>
    </thead>
    <!-- 绑定数据源并设置垂直拖拽方向 -->
    <tbody cdkDropList [cdkDropListData]="categoryListArray" (cdkDropListDropped)="drop($event)" cdkDropListOrientation="vertical">
        <!-- 给cdkDrag绑定当前分类数据，保留循环索引 -->
        <tr cdkDrag [cdkDragData]="category" *ngFor="let category of categoryListArray; let i = index" class="cursor_default">
            <td data-title="Name">
                <div class="d-flex ai-center gap-3">
                    <div class="move" cdkDragHandle>
                        <span nz-icon nzType="holder" nzTheme="outline"></span>
                    </div>
                    <figure class="_image me-2 pointer" (click)="imageView(category.category_name, category?.category_image)">
                      <img [src]="category?.category_image" [alt]="category?.category_image" onError="this.style.display = 'none';">
                    </figure>
                    <span>{{category.category_name}}</span>
                </div>
            </td>
            <td data-title="Items">
                <span>{{ getCategoryProductCount(category.category_id) }} Items</span>
            </td>
            <td data-title="Action">
                <div class="action">
                      <button
                        type="button"
                        title="Edit"
                        (click)="ViewStock(category.category_id)">
                          <i class="flaticon-show"></i>
                      </button>
                      <button type="button" (click)="selectCategory(category.category_id)" title="Edit">
                          <i class="flaticon-editing"></i>
                      </button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

2. 修改TS代码 #

订阅Observable获取实际数组，修复拖拽逻辑并正确更新所有项的priority：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Subscription } from 'rxjs';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  categoryList: Observable<any[]>;
  categoryListArray: any[] = [];
  private categorySub?: Subscription;

  ngOnInit(): void {
    // 订阅Observable，拿到实际数组并按现有priority排序
    this.categorySub = this.categoryList.subscribe(list => {
      this.categoryListArray = [...list].sort((a, b) => a.priority - b.priority);
    });
  }

  drop(event: CdkDragDrop<any[]>) {
    // 移动数组中的项，更新本地视图
    moveItemInArray(this.categoryListArray, event.previousIndex, event.currentIndex);

    // 遍历数组，更新每个项的priority（从1开始计数）
    this.categoryListArray.forEach((category, index) => {
      const newPriority = index + 1;
      if (category.priority !== newPriority) {
        const body = {
          category_id: category.category_id,
          priority: newPriority,
          rid: category.rid,
          product_version: category.product_version,
        };

        // 触发更新请求
        this.catStore.dispatch(
          InventoryCategoryAction.updateInventoryCategory({ body })
        );
        // 本地同步更新priority，避免视图不同步
        category.priority = newPriority;
      }
    });
  }

  ngOnDestroy(): void {
    // 取消订阅防止内存泄漏
    this.categorySub?.unsubscribe();
  }

  // 你的其他方法：imageView、getCategoryProductCount等
}

3. 基础配置检查 #

确保模块中已导入CDK拖拽模块：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // 其他模块
    DragDropModule
  ]
})
export class YourModule { }

可选添加拖拽样式优化：

tr.cdk-drag {
  cursor: move;
}
tr.cdk-drag-placeholder {
  opacity: 0;
}
cdk-preview {
  opacity: 0.5;
}

内容的提问来源于stack exchange，提问作者Shawn