создать сортируемый список с помощью перетаскивания с помощью angular5 и ng-bootstrap

Question

У меня работает большая часть моего приложения, и последняя часть - показать список элементов, которые пользователь может переставить в другом порядке, и сохранить его в этом новом порядке. Я разрабатывал с использованием angular5 (cli) и ng-bootstrap.

Как мне создать такой список? Я вижу, это возможно с ngx-bootstrap (https://valor -software.com / NGX-самозагрузка / # / сортировка ) но я бы действительно не хотел меняться сейчас, когда я почти закончил. Есть ли способ сделать это с помощью ng-bootstrap?

Изменить, чтобы добавить пример данных

Данные имеют такую ​​структуру (массив объектов):

data = [
  {name: 'adam',id: 'asedf'}, 
  {name: 'brian', id: 'aeqww'}, 
  {name: 'carl', id: '34534'}
]

Вызывается из HTML как

<ul>
  <li *ngFor="let person of data; let i=index;">{{person.name}}</li>
</ul>

И я хочу, чтобы пользователь мог изменить список имен и отразить его в базовой модели данных.

Answer 1

В конце концов я пропустил ng-bootstrap и использовал Dragula.

Шаблон HTML:

<ul [dragula]='"thebag"' [dragulaModel]="data">
  <li *ngFor="let person of data">person.name</li>
</ul>

Компонент:

import { DragulaService } from 'ng2-dragula';

export class MyComponent implements OnInit {
  data: any[];

constructor(private dragulaService: DragulaService) {
  dragulaService.setOptions('thebag', {});
  dragulaService.dropModel.subscribe((value) => {
    this.onDropModel(value);
  })
  this.data = [];
}
private onDropModel(args: any): void {
  const [el, target, source] = args;
  console.log('onDropModel:');
  console.log(el);
  console.log(target);
  console.log(source);
}

save() {
  console.log(this.data);
  }
}

Answer 2

Вы можете использовать сортировку для достижения этого:

dataToSort = [
    { name: 'dadam', id: 'asedf' },
    { name: 'brian', id: 'aeqww' },
    { name: 'catl', id: '34534' },
    { name: 'carl', id: '34534' }
  ]

this.dataToSort.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      return 0;
    });

BeforeSort:

AfterSort