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

あなたは私がtrすなわち、同じ要素に* ngForと* ngIfを使用しています見ることができるようにここで私はこれを達成しようとしている方法です。同じ要素に* 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>