如何从 Angular 2 中的 QueryList 获取子元素？

Posted 2023-03-13

【中文标题】如何从 Angular 2 中的 QueryList 获取子元素？

【英文标题】：How can I get children elements from QueryList in Angular 2?

【发布时间】：2018-01-24 09:33:17

【问题描述】：

我是 Angular2 的新手。在我看来，在 *ngFor 中生成的相同子代很少。

<ngb-panel *ngFor="let client of clients" [title]="'Client #' + client.id">
    <template ngbPanelContent>
        <processing-item [client]="client"></processing-item>
    </template>
</ngb-panel>

我需要在父元素调用这些组件的方法并找出ViewChildren装饰器，代码是：

@ViewChildren(ProcessingItemComponent) processingItems: QueryList<ProcessingItemComponent>;

然后我尝试通过 forEach 迭代它们：

ngAfterViewInit() 
    this.processingItems.forEach(function (el) 
        console.log(el);
    );

但它什么也没做。 QueryList 上调用的 toArray() 方法返回空数组。

有什么建议可以一次获取所有子组件并调用其方法吗？

【问题讨论】：

你能设置一个 plunker 吗？

【参考方案1】：

如果 clients 是通过异步调用（例如对服务器）设置的，则元素在 ngAfterViewInit() 中尚不存在。

你可以使用

ngAfterViewInit() 
  this.processingItems.changes.subscribe(() => 
    this.processingItems.toArray().forEach(el => 
        console.log(el);
    );
  );

另见https://angular.io/api/core/QueryList#changes

【讨论】：

问题是 processingItems 在某种程度上是不可迭代的，但它存在。当我尝试记录这个元素时，我得到了这个joxi.ru/Dr8OEypCkMeY0A

对不起，我忘了加toArray()

没关系，processingItems 存在并且在_result 中有子数组，但是 toArray() 返回空数组:(

我认为你的意思是this.processingItems.changes.subscribe(...)。 :-)

@GünterZöchbauer 不过，谢谢，我自己不会想到 Observable ）

【参考方案2】：

我认为您应该使用 @ContentChildren 属性而不是 ViewChildren。

@ContentChildren( OptionComponent )
public Options: QueryList<OptionComponent>;

【讨论】：

您能详细说明原因吗？

对不起 stefan，我想说的不适合评论，所以我在下面添加了它作为答案

我从上面的代码中假设用户希望使用模板语法和内容投影​​。我发现在这种情况下 ContentChildren 工作得更好，并且会返回这些项目。您可能还想将

这个问题实际上是不正确的。在问题中，她在放置ViewChildren 的同一组件中“就地”创建组件。所以它不是从父组件注入内容 - 但她想通过 ngFor 获取对 在该组件中 创建的子列表的引用。

Simon_Weaver 是正确的，但由于我遇到了类似的问题，即 .toArray() 返回空。 Gunter 的解决方案有效，但我的根本问题是父容器正在传递元素，而我正在使用 ViewChildren。切换到 ContentChildren 允许我从 Gunter 的回答中删除订阅逻辑。