Angular cdkDropList不'；t保存项目的新订单

我的angular项目中有一个超级简单的下拉列表：

<ul cdkDropList style="padding: 20px;">
    <li cdkDrag>111111</li>
    <li cdkDrag>222222</li>
    <li cdkDrag>333333</li>
    <li cdkDrag>444444</li>
    <li cdkDrag>555555</li>
</ul>

111111
2222222
333
444444
555555

但是，当我将

111111

拖到末尾时，它会跳回到列表中的第一位

• 这里有一个问题的解决方案
• 这是我在StackBlitz上的一个问题

---

您缺少一个数据源

拖动后，必须更新该数据源以反映UI

它正在跳回您的真实模态状态

示例：

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

HTML:

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

{{customer.name}

TS文件：

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

从“@angular/cdk/drag drop”导入{CdkDragDrop，moveItemInArray}；
...
导出类SortListComponent实现OnInit{
客户=[
{姓名：'亚当'，年龄：23}，
{姓名：'杰克'，年龄：27}，
{姓名：'Katherin'，年龄：26}，
{姓名：'John'，年龄：30}，
{姓名：“沃森”，年龄：42}，
];
drop（事件：CdkDragDrop）{
moveItemInArray（this.customers，event.previousIndex，event.currentIndex）；
}
}

---

请注意，我的客户是我的数据源。我在删除后更新它

您缺少一个数据源

拖动后，必须更新该数据源以反映UI

它正在跳回您的真实模态状态

示例：

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

HTML:

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

{{customer.name}

TS文件：

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

从“@angular/cdk/drag drop”导入{CdkDragDrop，moveItemInArray}；
...
导出类SortListComponent实现OnInit{
客户=[
{姓名：'亚当'，年龄：23}，
{姓名：'杰克'，年龄：27}，
{姓名：'Katherin'，年龄：26}，
{姓名：'John'，年龄：30}，
{姓名：“沃森”，年龄：42}，
];
drop（事件：CdkDragDrop）{
moveItemInArray（this.customers，event.previousIndex，event.currentIndex）；
}
}

---

请注意，我的客户是我的数据源。我在drop后更新它

你能给我一个关于stack blitz的例子吗？@Trevor你能给我一个关于stack blitz的例子吗？@Trevor我不能只硬编码我的列表项吗？它必须有一个数据模型？如果你想改变位置，是的。模板没有可更新的状态。这只是一个有趣的场景。非常感谢。我不能只是硬编码我的列表项目？它必须有一个数据模型？如果你想改变位置，是的。模板没有可更新的状态。这只是一个有趣的场景。非常感谢。