Angular7 ngFor与JQueryUI可排序-奇怪的数组渲染行为

我正在用JQueryUI可排序和Angular 7创建动画可重排序列表。 到目前为止，它工作得很好，但当我尝试在重新排列列表后添加新对象时，问题就出现了

                        <img class="img-fluid" src="{{sticker[0]}}">
                        <div class="manage-buttons row mx-0">
                            <div class="col-6 p-0">
                                <!--<button class="m-0 p-0 edit btn btn-sm btn-primary">Edit</button>-->
                            </div>
                            <div class="col-6 p-0">
                                <button class="m-0 p-0 delete btn btn-sm btn-danger">Delete</button>
                            </div>
                        </div>

模板：

                        <img class="img-fluid" src="{{sticker[0]}}">
                        <div class="manage-buttons row mx-0">
                            <div class="col-6 p-0">
                                <!--<button class="m-0 p-0 edit btn btn-sm btn-primary">Edit</button>-->
                            </div>
                            <div class="col-6 p-0">
                                <button class="m-0 p-0 delete btn btn-sm btn-danger">Delete</button>
                            </div>
                        </div>

如果不进行重新排序，添加工作将正常进行，“choo-choo.jpg”将位于列表的末尾

                        <img class="img-fluid" src="{{sticker[0]}}">
                        <div class="manage-buttons row mx-0">
                            <div class="col-6 p-0">
                                <!--<button class="m-0 p-0 edit btn btn-sm btn-primary">Edit</button>-->
                            </div>
                            <div class="col-6 p-0">
                                <button class="m-0 p-0 delete btn btn-sm btn-danger">Delete</button>
                            </div>
                        </div>

但在重新排序之后，当我尝试添加新图像时，图像会进入可排序列表内容的中间位置（即使cho choo是我在ngFor中使用的数组的最后一个索引）

                        <img class="img-fluid" src="{{sticker[0]}}">
                        <div class="manage-buttons row mx-0">
                            <div class="col-6 p-0">
                                <!--<button class="m-0 p-0 edit btn btn-sm btn-primary">Edit</button>-->
                            </div>
                            <div class="col-6 p-0">
                                <button class="m-0 p-0 delete btn btn-sm btn-danger">Delete</button>
                            </div>
                        </div>

---

如何修复该问题，并使ngFor按列表项在数组中的状态呈现列表项？

不要推送数组。只需推动项目

                        <img class="img-fluid" src="{{sticker[0]}}">
                        <div class="manage-buttons row mx-0">
                            <div class="col-6 p-0">
                                <!--<button class="m-0 p-0 edit btn btn-sm btn-primary">Edit</button>-->
                            </div>
                            <div class="col-6 p-0">
                                <button class="m-0 p-0 delete btn btn-sm btn-danger">Delete</button>
                            </div>
                        </div>

this.stickers = [];
this.stickers.push('assets/img/cho-choo.jpg');

---

我把它改为const temp=this.stickers；this.stickers=[]；临时推送（“资产/img/cho-choo.jpg”）；这个。贴纸=温度；它仍然不起作用。你不能推到

const

。它们是只读值。不能变异。直接推到

标签

，但我无法清除标签，因此我制作了临时数组（我尝试将其更改为让temp..，但效果不佳）。当我这样做的时候。stickers.push（'assets/img/cho-choo.jpg'）；它不起作用。该项仍然位于可排序列表的中间。这基本上就是这段代码，我刚刚在TS中添加了Angular（ngFor）和sticker数组。很抱歉没有制作整个演示，但是jquery不想在stackblitz上为我工作。我希望这就足够了。