Всегда ли порядок QueryList из @ViewChildren совпадает с порядком в DOM?

Question

Предположим, у меня есть несколько my-component с, и я хотел бы запросить их список:

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

Используя @ViewChildren, я могу получить список (например, через .toArray), которыйможет выглядеть следующим образом:

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

Единственное, что меня беспокоит, это то, что я не уверен, будет ли порядок всегда таким же, как в DOM. В документации ничего не говорится о заказе.Порядок имеет значение в моем случае, потому что я пытаюсь выбрать компонент с заданным индексом.

Всегда ли порядок QueryList, установленный @ViewChildren, совпадает с порядком в DOM?

Answer 1

Не всегда соответствует DOM-порядку.

Если элементы перемещаются или добавляются во время выполнения, порядок QueryList будет отключен.Это случилось со мной в таблице @ angular / material с перетаскиванием.

Чтобы решить эту проблему, вам нужно вызвать reset в QueryList, передавая отсортированные дочерние элементы.Это можно сделать одним из способов, подписавшись на QueryList-изменения:

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 > 0),
  map(rows => rows.sort((a, b) => indexOfRow(a) - indexOfRow(b)))
);

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