使用angular5和ng-bootstrap创建拖放可排序列表

Question

我的大部分应用都在工作，最后一部分是显示用户可以按不同顺序重新排列的项目列表，并将其保存在新订单中。我一直在使用angular5（cli）和ng-bootstrap进行开发。

如何创建此类列表？我认为使用ngx-bootstrap是可能的 （https://valor-software.com/ngx-bootstrap/#/sortable）  但是我现在真的不想改变，因为我差不多完成了。有没有办法用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

您可以使用sort来实现此目的：

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