<p dir="auto">I have a component that uses NgFor to create other components inside it's view, by iterating over a list.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ul&gt;
  &lt;li *ng-for=&quot;#item of playlist&quot;&gt;&lt;item [name]=&quot;item.name&quot;&gt;&lt;/item&gt;&lt;/li&gt;
&lt;/ul&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">*ng-for</span>="<span class="pl-s">#item of playlist</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">item</span> <span class="pl-c1">[name]</span>="<span class="pl-s">item.name</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">item</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I use ViewQuery to get a hold of the child components.</p>
<p dir="auto">All is well until i change the <code class="notranslate">playlist</code> getter to return a map of the original array:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  get playlist() {
    return this.content.map((i) =&gt; { return {name: i.name + 'y'} })
  }"><pre class="notranslate">  <span class="pl-k">get</span> <span class="pl-en">playlist</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">content</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">i</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-kos">{</span><span class="pl-c1">name</span>: <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">+</span> <span class="pl-s">'y'</span><span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">It seems that NgFor repeatedly destroys and creates the  components, on each change, but the ViewQuery keeps accumulating components. After a few ticks, ViewQuery stops working entirely and throws.</p>
<p dir="auto">Here is a plunker showcasing the bug:<br>
<a href="http://plnkr.co/edit/uGKcpQUJoWWo4SPNp3z8" rel="nofollow">http://plnkr.co/edit/uGKcpQUJoWWo4SPNp3z8</a></p>
<p dir="auto">For performance reasons queries and view queries are stored in element injector fields instead of held in maps. The current limit is 3 and that is already showing to be very limiting.</p>
<p dir="auto">I propose bumping the limit to 5 and implementing a fallback to maps strategy similar to injectors (instead of current behavior of throwing).</p>