title: Angular2 - *ngIf and *ngFor create multiple empty elements
body: <p>I have two tables in db, and from the apis, i'm creating loops:</p>
  <pre><code>&lt;div *ngFor=&quot;let laptop of laptops&quot;&gt;
      some content
      &lt;!-- Producer / Name --&gt;
      &lt;div *ngFor=&quot;let producer of producers&quot;&gt;
           &lt;div class=&quot;title&quot; *ngIf=&quot;producer.id === laptop.producerId&gt;
                 {{producer.name}} {{laptop.model}}
           &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have 70 producer names and foreign key from laptops to producer table. My e.g. laptop has got producerId = 3 and i want to loop for each producers and display only this which meets the condition. It works but when i see DOM, it scares me. 70 divs! I've read this: <a href="https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error">*ngIf and *ngFor on same element causing error</a></p>
  <p>and after this:</p>
  <pre><code> &lt;ng-container *ngFor=&quot;let producer of producers&gt;
          &lt;div class=&quot;title&quot; *ngIf=&quot;producer.id === laptop.producerId&gt;
               {{producer.name}} {{laptop.model}}
          &lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>
  <p>I have in DOM:</p>
  <p><a href="https://i.stack.imgur.com/nCgnw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nCgnw.png" alt="enter image description here" /></a></p>
  <p>Is that correct result? Or is there any way to create only that div which meets the condition?
  <a href="https://i.stack.imgur.com/KN4MO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KN4MO.png" alt="enter image description here" /></a></p>