Skip to content

QueryList not iterable in constructor #3577

@ericmartinezr

Description

@ericmartinezr

Sorry for the vague title.

This is a simple thing but I was suggested to post this as an issue by another user.

Whenever you want to access a QueryList (by Query [directives] or ViewQuery [components]) you can't iterate over the list in the constructor. If you print the list you see the results, but they are not iterable. If you iterate over them in onInit (for example) it works like it should. If this is the expected behaviour it should be documented for others users may struggle with this issue.

See this example code

@Component({ selector : 'main-component' }) @View({ template : `<another-component #anothercmp></another-component>`, directives : [AnotherComponent] }) class MainComponent { constructor(@ViewQuery('#anothercmp') anotherCmp: QueryList) { // It prints the results under '_results' console.log(anotherCmp); this.anotherCmp = anotherCmp; // But they aren't iterable // Nothing is printed for(let an of anotherCmp) { an.doSomething(); } } onInit() { // Here there is no problem, everything works like a charm for(let an of this.anotherCmp) { an.doSomething(); } } }

Not a coding issue, but documentation. Here's a repro for both directives and components.

Edit : Just now I found this issue #2916 where is explained why this happens, but still, it should be documented.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions