UL, LI: список не обновляется после изменения модели данных источника - PullRequest
Новая
       22

UL, LI: список не обновляется после изменения модели данных источника

1 голос
/ 24 марта 2019

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

Я создал пример перетаскивания в Angular6.Я не использовал никаких угловых указаний.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), он не отражается в списке.

Мое требование: после обновления объекта массива список долженповторно выполнить рендеринг по последним данным.

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

Спасибо, Радж

1 Ответ

0 голосов
/ 24 марта 2019

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

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

...