*ngIf and *ngFor on same element causing error
<p>I'm having a problem with trying to use Angular's <code>*ngFor</code> and <code>*ngIf</code> on the same element. </p>

<p>When trying to loop through the collection in the <code>*ngFor</code>, the collection is seen as <code>null</code> and consequently fails when trying to access its properties in the template.</p>

<pre class="lang-ts prettyprint-override"><code>@Component({
  selector: 'shell',
  template: `
    &lt;h3&gt;Shell&lt;/h3&gt;&lt;button (click)="toggle()"&gt;Toggle!&lt;/button&gt;

    &lt;div *ngIf="show" *ngFor="let thing of stuff"&gt;
      {{log(thing)}}
      &lt;span&gt;{{thing.name}}&lt;/span&gt;
    &lt;/div&gt;
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { name: 'other', id: 6 },
    ]
  }

  toggle() {
    this.show = !this.show;
  }

  log(thing) {
    console.log(thing);
  }

}
</code></pre>

<p>I know the easy solution is to move the <code>*ngIf</code> up a level but for scenarios like looping over list items in a <code>ul</code>, I'd end up with either an empty <code>li</code> if the collection is empty, or my <code>li</code>s wrapped in redundant container elements.</p>

<p>Example at this <a href="http://plnkr.co/edit/C5tZ8mD3iWczVvWkWycH?p=preview" rel="noreferrer">plnkr</a>.</p>

<p>Note the console error:</p>

<pre><code>EXCEPTION: TypeError: Cannot read property 'name' of null in [{{thing.name}} in ShellComponent@5:12]
</code></pre>

<p>Am I doing something wrong or is this a bug?</p>