UL、LI：一旦源数据模型发生变化，列表不会更新

Question

开发环境：Angular 6 功能：拖放

我在 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），它就不会反映在列表中。

我的要求是，一旦我更新了数组对象，列表应该重新渲染最新的数据。

注意：如果它是一个简单的列表，它可以正常工作。但是一旦我们将拖放添加到列表中，它就不会改变。

谢谢， 拉杰

Answer 1

有一种粗略但有效的方法是将ChangeDetectorRef 注入组件并在更新 selectedList 的内容后显式调用detectChanges() 方法。

另一个想法 - 你是在改变 selectedList（push()，splice()，类似的东西），还是用新版本替换它（this.selectedList = [...this.selectedList, newElem].filter(/* some filter */)）？如果是前者，Angular 只会对值进行粗略的比较，而像 push() 这样的突变会被忽略。