我的大部分应用程序都在工作，最后一部分是显示用户可以按不同顺序重新排列并以新顺序保存的项目列表。我一直在使用 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>
我希望用户能够重新排列名称列表并将其反映在底层数据模型中。
我最终做的是跳过 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);
}
}
您可以使用 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;
});
