title: Angular2 - *ngFor and *ngIf on same element producing error
body: <p>I have an array of users and I want to show only male users on the table. Here is how I am trying to achieve this:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {bootstrap} from 'angular2/platform/browser';
  
  @Component({
      selector: 'app',
      template:`
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr *ngFor="#user of users" *ngIf="user.gender == 'male' " &gt;
                  &lt;td&gt;{{user.name}}&lt;/td&gt;
                  &lt;td&gt;{{user.gender}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      `
  })
  export class AppCmp{
      public users = [
          {
              name: "Eesa",
              gender: "male"
          },
          {
              name: "Abdullah",
              gender: "male"
          },
          {
              name: "Javeria",
              gender: "female"
          }
      ]
  }
  
  bootstrap(AppCmp);
  </code></pre>
  
  <p>but I am getting the following error:</p>
  
  <blockquote>
    <p>EXCEPTION: TypeError: Cannot read property 'gender' of undefined</p>
  </blockquote>
  
  <p>as you can see I am using *ngFor and *ngIf on the same element i.e. <code>tr</code>. Why can't I use *ngFor and *ngIf on the same element? Is there any other way of achieving this? I re-produced the problem <a href="http://embed.plnkr.co/Ro92iRwc7MlNAj2xf9jo/" rel="noreferrer">here on plunker</a> you can see the error on the console.</p>