来自@ViewChildren 的 QueryList 的排序是否总是与 DOM 中的排序相匹配？

Question

Suppose I have a few my-component s and I would like to query a list of them:

<li><my-component>#1</my-component><li>
<li><my-component>#2</my-component><li>
<li><my-component>#3</my-component><li>

Using @ViewChildren I can get a list (for example through .toArray ) that might look like the following:

[
    /* reference to #1 component*/,
    /* reference to #2 component*/,
    /* reference to #3 component*/
]

My only concern here is that I am not sure whether the order will always be the same as it is in the DOM. The documentation does not mention anything regarding the ordering. The order matters in my case because I am trying to select the component with a given index.

Does the ordering of the QueryList set by @ViewChildren always match with the ordering in the DOM?

Answer 1

It does not always match the DOM-order.

If items are moved or added run time, the order of the QueryList will be off. This happened to me in an @angular/material table with drag-drop.

To solve it, you have to call reset on the QueryList passing sorted child items. This is one way you could to that by subscribing to QueryList-changes:

const rowChange$: Observable<QueryList<MatRow>> = this.rows.changes;

const indexOfRow = (row: MatRow) => {
  return [...this._elementRef.nativeElement.children].indexOf(row.elementRef.nativeElement);
};

const sortedRows$ = rowChange$.pipe(
  map(rows => rows.toArray()),
  filter(rows => rows.length > 1),
  map(rows => rows.sort((a, b) => indexOfRow(a) - indexOfRow(b)))
);

sortedRows$
  .pipe(takeUntil(this.destroySub))
  .subscribe(sortedRows => this.rows.reset(sortedRows));