求解 angular CDK drag 数据循环排序问题

Question

循环中排序无效
https://stackblitz.com/edit/a...

Answer 1

你写错了.两个地方,解释写在代码里面了

<div *ngFor="let data of list">
  <h2>{{data.title}}</h2>
  <div>
    <div cdkDropList #dropList="cdkDropList" class="example-list" (cdkDropListDropped)="drop(data.children,$event)"> 
    <!--这里事件要加上,不然drop谁来调用 -->
      <div class="example-box" *ngFor="let item of data.children" cdkDrag>
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{item.title}}
      </div>
    </div>
  </div>
</div>

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

/**
 * @title Drag&Drop custom placeholder
 */
@Component({
  selector: 'cdk-drag-drop-custom-placeholder-example',
  templateUrl: 'cdk-drag-drop-custom-placeholder-example.html',
  styleUrls: ['cdk-drag-drop-custom-placeholder-example.css']
})
export class CdkDragDropCustomPlaceholderExample {
  list = [
    {
      id: 'key_01',
      title: '测试——01',
      children: [{ id: 1, title: '你好' }, { id: 2, title: '他好' }]
    },
    {
      id: 'key_02',
      title: '测试——03',
      children: [{ id: 1, title: 'HAH' }, { id: 2, title: '哈哈' }]
    }
  ];

  drop(list: Array<any>, event: CdkDragDrop<string[]>) {
  //注意这里,排序是改变数组本身,你是数据出来两个小list分别排序,所有这里需要传入当前数组
    moveItemInArray(list, event.previousIndex, event.currentIndex);
  }
}