Angular2+ how to get proper element order from QueryList<>

Question

so I have a sortable list which are several elements in an *ngFor, which I drag and drop. On drop I would like to get the new order of the items. So I added an event but the order of QueryList remains the same.

Here are some things I have tried with no luck

public getOrder() {

        var records: QueryList<SimpleGridRecord> = this.simpleGridRecords.length > 0 || this.simpleGridDraggable.simpleGridRecords;
        records.notifyOnChanges()
        // this.cd.detectChanges();
        records.forEach((s:SimpleGridRecord) => {
            console.log(s.index);
            console.log(s.item.getKey('id'));
        });

    }

is there anyway to get the updated order list of elements?

I keep index and id in my objects which I loop over

regards

Sean

Can you create a plunker?

yurzui
– yurzui

2017-02-26 19:08:22 +00:00
Commented Feb 26, 2017 at 19:08 — yurzui
– yurzui, Commented Feb 26, 2017 at 19:08

Günter Zöchbauer · Accepted Answer · 2017-02-26 17:33:55Z

1

You can use @ContentChildren() or @ViewChildren() and subscribe to changes:

@ViewChildren(SimpleGridRecord) records: QueryList<SimpleGridRecord>;

ngAfterViewInit() {
  this.records.changessubscribe(val => console.log(this.records.toArray()));
}

answered Feb 26, 2017 at 17:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

born2net Over a year ago

tx for the answer, that's exactly what I do, but the order of items is not the same order as it is in the HTML <li>

born2net Over a year ago

I added an image and as you can see, after a drop, X is first in the Query but Y is first in the UI :(

Günter Zöchbauer Over a year ago

Do you update the order by direct DOM manipulation, or by changing the order of the array you use in *ngFor?

born2net Over a year ago

yes I update the order by direct DOM manipulation as I do a drag and drop to change the order of the items, which I have to touch the DOM

Günter Zöchbauer Over a year ago

I thunk you should afterwards change the order in the array to let *ngFor redraw in the new order, them also the query will match.

Collectives™ on Stack Overflow

Angular2+ how to get proper element order from QueryList<>

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related