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中的顺序相同。 The documentation没有提及有关订购的任何内容。对于我而言，顺序很重要，因为我试图选择具有给定索引的组件。

由@ViewChildren设置的QueryList的顺序是否总是与DOM中的顺序匹配？

Answer 1

它并不总是与DOM顺序匹配。

如果移动或添加了运行时项目，则QueryList的顺序将关闭。这发生在我拖放的@ angular / material表中。

要解决此问题，您必须在QueryList上调用reset并传递已排序的子项。通过订阅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 > 0),
  map(rows => rows.sort((a, b) => indexOfRow(a) - indexOfRow(b)))
);

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

@ViewChildren中的QueryList的顺序是否始终与DOM中的顺序匹配？

1 个答案: