使用 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

您可以使用排序来实现：

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

排序前：

排序后

Answer 2

我最后做的是跳过 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);
  }
}

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

create drag and drop sortable list with angular5 and ng-bootstrap

ng-bootstrap

ng2-dragula

angular

排序前：

排序后