Angular2 - * ngFor e * ngIf sullo stesso elemento che produce errore

Question

Ho una matrice di utenti e voglio mostrare solo utenti di sesso maschile sul tavolo. Ecco come sto cercando di raggiungere questo obiettivo:

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'app', 
    template:` 
    <table> 
     <tbody> 
      <tr *ngFor="#user of users" *ngIf="user.gender == 'male' " > 
       <td>{{user.name}}</td> 
       <td>{{user.gender}}</td> 
      </tr> 
     </tbody> 
    </table> 
    ` 
}) 
export class AppCmp{ 
    public users = [ 
     { 
      name: "Eesa", 
      gender: "male" 
     }, 
     { 
      name: "Abdullah", 
      gender: "male" 
     }, 
     { 
      name: "Javeria", 
      gender: "female" 
     } 
    ] 
} 

bootstrap(AppCmp); 

ma sto ottenendo il seguente errore:

EXCEPTION: TypeError: Cannot read property 'gender' of undefined

come potete vedere sto usando * ngFor e * ngIf sullo stesso elemento cioè tr . Perché non posso usare * ngFor e * ngIf sullo stesso elemento? C'è un altro modo per raggiungere questo? Ho ri-prodotto il problema here on plunker è possibile vedere l'errore sulla console.

Answer 1

Infatti, ngIf e ngFor su uno stesso elemento non sono supportati. Si potrebbe utilizzare la sintassi estesa di ngIf per essere in grado di implementare questa:

<tr *ngFor="#user of users"> 
    <template [ngIf]="user.gender == 'male'"> 
    <td>{{user.name}}</td> 
    <td>{{user.gender}}</td> 
    </template> 
</tr>