Angular2 - * ngFor и * ngIf на том же элементе, производящем ошибку

Question

У меня есть массив пользователей, и я хочу показать только пользователей-мужчин на столе. Вот как я пытаюсь достичь:

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); 

, но я получаю следующее сообщение об ошибке:

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

, как вы можете видеть, я использую * ngFor и * ngIf на одном элементе т.е. tr , Почему я не могу использовать * ngFor и * ngIf для одного элемента? Есть ли другой способ достичь этого? Я перепробовал проблему here on plunker, вы можете увидеть ошибку на консоли.

Answer 1

На самом деле, ngIf и ngFor на одном и том же элементе не поддерживаются. Вы можете использовать расширенный синтаксис ngIf, чтобы быть в состоянии осуществить это:

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