将元素附加到 QueryList Angular

Posted 2023-03-11

【中文标题】将元素附加到 QueryList Angular

【英文标题】：Append element to QueryList Angular

【发布时间】：2018-04-26 09:37:06

【问题描述】：

有没有办法将新元素附加到 QueryList 中？

例如，我有一个这样的查询列表：

@ContentChildren(SysColumn) syscolumns: QueryList<SysColumn>;

而且我需要在视图初始化之后附加另一个 SysColumn。在 Angular 上可行吗？我尝试追加，但它说这不是 QueryList 的功能。

【问题讨论】：

即使您能够做到 Angular 也会在下一个更改检测周期重新计算收集。您可以创建另一个集合并使用它。

如何创建另一个集合？

const myColumns = [...this.syscolumns.toArray()]

但是我不知道你这个想法的目的是什么

没关系，但我不需要它是一个数组，我需要它是一个 QueryList。我有另一个接收 QueryList 的对象，所以我需要一个包含所有元素的新 QueryList，这就是为什么我需要它将新元素附加到查询列表。

【参考方案1】：

你可以使用reset方法

this.syscolumns.reset([...this.syscolumns.toArray(), this.additionalColumn])

Stackblitz Example