Создайте сортируемый список перетаскиванием с помощью angular5 и ng-bootstrap
У меня работает большая часть моего приложения, и последняя часть - показать список элементов, которые пользователь может переставить в другом порядке и сохранить его в этом новом порядке. Я занимаюсь разработкой с использованием 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>
И я хочу, чтобы пользователь мог изменить список имен и отразить его в базовой модели данных.
Ответы 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
Спасибо, вы правы, что я могу отсортировать список, но Пользователь должен иметь возможность перетаскивать, чтобы переупорядочить список, с переупорядочиванием, привязанным к модели данных. отсюда и запрос angular / bootstrap.
В конце концов я пропустил 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.info('onDropModel:');
console.info(el);
console.info(target);
console.info(source);
}
save() {
console.info(this.data);
}
}
Можете ли вы опубликовать образец списка и на основании чего вы хотите переставить в другом порядке