Angular7 ngFor with JQueryUI Sortable - weird array render behaviour

Question

I am creating animated reorderable list with JQueryUI sortable and Angular 7. It works well so far, but the problem occurs, when I am trying to add new object after reordering the list.

Template:

                        <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>

I am simply adding new obj like that:

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

Without reordering adding works well, the 'choo-choo.jpg' goes at the end of the list.

But after reordering, when I'm trying to add new image, the image goes to the middle of the content of the sortable list (even if the cho-choo is at last index of the array that I am using in the ngFor).

How can i fix that, and make ngFor render my list items as they are in the array?

Sachila Ranawaka · Accepted Answer · 2018-11-30 11:42:52Z

1

Don't push an array. Just push the item

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

answered Nov 30, 2018 at 11:42

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

maddi Over a year ago

I've changed it to const temp = this.stickers; this.stickers = []; temp.push('assets/img/cho-choo.jpg'); this.stickers = temp; and it's still doesn't work.

Sachila Ranawaka Over a year ago

you can't push to const. they are read-only values. can't mutate. Push directly to stickers

maddi Over a year ago

but i cant clear the stickers, so i make temp array (i've tried to change it to let temp.., but it didn't work aswell'). When i do just this.stickers.push('assets/img/cho-choo.jpg'); it doesn't work. The item goes still to the middle of the sortable list.

maddi Over a year ago

codepen.io/chriscoyier/pen/BvcKq this is basically this code, i've just added Angular to it (ngFor) and sticker array in TS. Sorry for not making the whole demo, but jquery doesn't want to work for me on stackblitz.I hope this will be enough.

Collectives™ on Stack Overflow

Angular7 ngFor with JQueryUI Sortable - weird array render behaviour

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related