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>