Блог

Среда разработки: Angular 6 Функциональность: перетаскивание

Я создал пример перетаскивания в Angular6. Я не использовал никакой директивы angular. HTML5 предоставляет некоторый метод для достижения этого, используя тот же самый.

у меня есть объект массива (т. е. selectedList), с помощью этого объекта я повторяю и создаю список. ПРИМЕР:

      <li draggable="true"  *ngFor="let item of selectedList" class="k-item" id="{{item['flD_NUM']}}_{{item['tablE_NME']}}"
                        (drop)="drop('list_columns_selected',$event)" 
                        (dragenter)= "dragEnter('list_columns_selected',$event)" 
                        (dragleave)= "dragLeave('list_columns_selected',$event)" 
                        (dragstart)="dragStart('list_columns_selected',item,$event)" 
                        (dragend)="dragend('list_columns_selected',$event)"
                        (click)="selectList('list_columns_selected',item,$event)"
                        (drag) = "drag('list_columns_selected',$event)"
                        (dragover) = "isDropAllowed('list_columns_selected',$event)"
                        >
  

Но: как только я обновляю объект массива (т. Е. selectedList), он не отражается в списке.

Мое требование заключается в том, что после обновления объекта array список должен повторно отображаться на последних данных.

Примечание: если это простой список, он работает нормально. Но как только мы добавили Drag amp; drop в список, он не меняется.

Спасибо, Raj

Существует грубый, но эффективный способ внедрения ChangeDetectorRef в компонент и явного вызова detectChanges() метода после обновления содержимого selectedList.

Еще одна идея — вы изменяете selectedList ( push() , splice() и тому подобное), или вы заменяете его новой версией ( this.selectedList = [...this.selectedList, newElem].filter(/* some filter */) )? В первом случае Angular выполняет лишь поверхностное сравнение значения, и мутации, подобные push() , ускользают от внимания.