Angular 5中ng-Dragula表格过滤后拖拽行数据错误问题

这个问题我之前帮同事排查过类似的，核心问题基本都出在管道处理后的数组和原数组的引用/索引不匹配上，咱们一步步拆解：

问题根源分析 #

1. 管道返回全新数组：Angular默认的纯管道（比如你用的orderBy、familieFilter这些）每次触发时都会返回一个全新的数组实例，而不是修改原数组FineTunedDatas。ng-dragula如果直接基于模板循环的元素引用或者原数组索引来处理拖拽，就会出现数据不对应。
2. 分页的索引干扰：paginate管道会返回当前页的子集数据，比如原数组有15条数据，当前显示第2页（第6-10条），模板里循环的是这5条，但如果拖拽逻辑错误地取原数组的索引0-4，就会把原数组前5条数据拖过去，而不是当前显示的行。

推荐解决方案：把管道逻辑移到组件内处理 #

模板里堆多个管道不仅难维护，还容易引发这类数据绑定问题，最好把过滤、排序、分页的逻辑都移到组件类中：

步骤1：定义组件变量 #

在组件里声明存储处理后数据的变量，以及各种过滤/排序/分页参数：

// 原数据数组
FineTunedDatas: YourDataType[] = [];
// 存储最终处理后的数据
filteredData: YourDataType[] = [];
// 过滤排序参数
sortKey: string = '默认排序字段';
sortReverse: boolean = false;
familyFilter: string = '';
searchFilter: string = '';
// 分页参数
currentPage: number = 1;
itemsPerPage: number = 5;

步骤2：实现数据处理方法 #

把所有管道的逻辑整合到一个方法里，手动处理过滤、排序、分页：

updateFilteredData(): void {
  let tempData = [...this.FineTunedDatas]; // 复制原数组避免修改源数据

  // 搜索过滤逻辑（对应searchfilter管道）
  if (this.searchFilter) {
    tempData = tempData.filter(item => 
      item.name.includes(this.searchFilter) || 
      item.description.includes(this.searchFilter) // 按你的实际字段调整
    );
  }

  // 家族过滤逻辑（对应familieFilter管道）
  if (this.familyFilter) {
    tempData = tempData.filter(item => item.family === this.familyFilter);
  }

  // 排序逻辑（对应orderBy管道）
  tempData.sort((a, b) => {
    const valueA = a[this.sortKey];
    const valueB = b[this.sortKey];
    if (valueA < valueB) return this.sortReverse ? 1 : -1;
    if (valueA > valueB) return this.sortReverse ? -1 : 1;
    return 0;
  });

  // 分页逻辑（对应paginate管道）
  const startIndex = (this.currentPage - 1) * this.itemsPerPage;
  this.filteredData = tempData.slice(startIndex, startIndex + this.itemsPerPage);
}

步骤3：触发数据更新 #

在组件初始化、参数变化时调用updateFilteredData：

ngOnInit(): void {
  this.updateFilteredData();
}

// 搜索框变化时触发
onSearchFilterChange(): void {
  this.currentPage = 1; // 过滤后回到第一页
  this.updateFilteredData();
}

// 分页切换时触发（比如用ngx-pagination的pageChange事件）
onPageChange(page: number): void {
  this.currentPage = page;
  this.updateFilteredData();
}

步骤4：修改模板循环 #

模板里直接循环处理后的filteredData，去掉所有管道：

<tr *ngFor="let item of filteredData" [dragula]="'your-bag-name'">
  <!-- 表格单元格内容 -->
  <td>{{item.name}}</td>
  <td>{{item.family}}</td>
  <!-- 其他列 -->
</tr>

这样处理后，模板里的每一行都是处理后数组的直接元素，拖拽时拿到的就是当前显示的正确数据。

备选解决方案：修改拖拽逻辑适配管道场景 #

如果暂时不想改动管道的使用方式，可以通过拖拽事件手动绑定当前行的正确数据：

步骤1：模板绑定拖拽事件 #

给拖拽行绑定drag事件，传递当前行的数据：

<tr *ngFor="let item of FineTunedDatas | orderBy: sortKey : sortReverse | familieFilter: familyFilter | searchfilter: searchFilter | paginate: { itemsPerPage: 5, currentPage: currentPage }"
    [dragula]="'your-bag-name'"
    (drag)="onDragStart($event, item)">
  <!-- 表格内容 -->
</tr>

步骤2：组件中存储拖拽数据 #

在组件里声明变量存储当前拖拽的元素：

currentDraggedItem: YourDataType | null = null;

onDragStart(event: Event, item: YourDataType): void {
  this.currentDraggedItem = item;
}

步骤3：处理拖拽放下事件 #

在drop事件中使用存储的currentDraggedItem添加到目标表格：

constructor(private dragulaService: DragulaService) {
  this.dragulaService.drop('your-bag-name').subscribe(({ target }) => {
    if (this.currentDraggedItem) {
      // 深拷贝避免源表格和目标表格数据联动
      this.targetTableData.push(JSON.parse(JSON.stringify(this.currentDraggedItem)));
      this.currentDraggedItem = null;
    }
  });
}

额外注意事项 #

• 深拷贝数据：如果拖拽后两个表格的数据需要独立，一定要对拖拽元素进行深拷贝，避免引用类型导致的同步修改。
• 移除源数据：如果需要拖拽后从源表格移除该行，要在处理后的数组（方案一）中找到对应元素的引用再移除，不要用索引操作原数组。

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