title: @ViewChildren Querylist Array is empty when children are rendered with *ngFor
body: <pre><code>import { Component, OnInit, ViewChildren } from '@angular/core';
  import { ChildComponent } from './child/child.component';
  
  @Component({
      selector: 'app-parent'
      styleUrls: [],
      templateUrl: `&lt;div&gt;
                      &lt;app-child *ngFor="let data of datas" [data]="data"&gt;&lt;/app-
                      child&gt;
                    &lt;div&gt;'
  
  export class ParentComponent implements OnInit {
  
  @ViewChildren(ChildComponent) children;
  </code></pre>
  
  <p>Hello, as above I have several <code>&lt;app-child&gt;</code> components in Parent component rendered with ngFor. I'd like to access each child component's methods within the parent component. However, the Querylist keep returning an empty array. </p>
  
  <p>Note that both parent and child components have been declared within the seperate root component's app-module. The child components renders no problem when parent's "datas" field is filled/changed. The problem is I just can't capture the rendered Child components in @ViewChildren decorator property. </p>
  
  <p>Edit: Here's the console log:</p>
  
  <pre><code>QueryList {dirty: false, _results: Array(0), changes: EventEmitter}changes: 
  EventEmitter {_isScalar: false, observers: Array(0), closed: false, 
  isStopped: false, hasError: false, …}dirty: falsefirst: (...)last: 
  (...)length: (...)_results: (4) [AnswerButtonComponent, 
  AnswerButtonComponent, AnswerButtonComponent, 
  AnswerButtonComponent]__proto__: Object
  </code></pre>
  
  <p>There seems to be two _results attribute in the query list, the first is empty second has 4 references to the child components.</p>
  
  <p>How do I extract those?</p>