title: Angular 2 QueryList's find
body: <p>I have a component with:</p>
  
  <pre><code>@ViewChildren(MyDirective) factories: QueryList&lt;MyDirective&gt;;
  </code></pre>
  
  <p>when I want to find an element in the <code>QueryList</code> it is working:</p>
  
  <pre><code>ngAfterViewInit() {
      let field1 = this.factories.find(factory =&gt; factory.meta.id == 'field1');
      console.log(field1);    
  }
  </code></pre>
  
  <blockquote>
    <p>MyDirective {vcRef: ViewContainerRef_, loader: MyLoaderService, meta: Object}</p>
  </blockquote>
  
  <p>But when I try to access a property of <code>field1</code>:</p>
  
  <pre><code>ngAfterViewInit() {
      let field1 = this.factories.find(factory =&gt; factory.meta.id == 'field1');
      console.log(field1.property);    
  }
  </code></pre>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'property' of undefined</p>
  </blockquote>
  
  <p><b>UPDATE:</b></p>
  
  <p>The problem I think exists because of dynamic form creation. <a href="https://plnkr.co/edit/Zj1lW5hpMdogFJoVP6QJ?p=preview" rel="nofollow noreferrer">Here</a> is a plunker. In <code>app.ts</code> I have the code above.</p>