cdkDropList не сохраняет новый порядок элементов - PullRequest
Новая
       49

cdkDropList не сохраняет новый порядок элементов

0 голосов
/ 04 марта 2019

У меня есть супер простой выпадающий список в моем угловом проекте: 

<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 в конец, он возвращается к тому, чтобы быть первым в списке.

1 Ответ

0 голосов
/ 04 марта 2019

Вам не хватает источника данных .

После перетаскивания необходимо обновить этот источник данных, чтобы он отображал ваш пользовательский интерфейс.

Он возвращается к вашему real модальное состояние.

Пример:

HTML: 

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

Файл TS: 

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);
  }
}

Обратите внимание, мои клиенты - это мой источник данных.И я обновляю его после падения

...