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.