Angular7 ngFor с JQueryUI Sortable - странное поведение рендеринга массива

Question

Я создаю анимированный переупорядочиваемый список с помощью JQueryUI sortable и 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>

Я просто добавляю новый объект:

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

Без изменения порядка добавления работает хорошо, 'choo-choo.jpg' идет в конце списка.

Но после переупорядочения, когда я пытаюсь добавить новое изображение, изображение переходит в середину содержимого сортируемого списка (даже если cho-choo является последним индексом массива, который я использую вngFor).

Как я могу это исправить и заставить ngFor отображать мои элементы списка, как они есть в массиве?

Answer 1

Не выдвигайте массив.Просто нажмите пункт

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