Angular2 - * ngFor e * ngIf no mesmo elemento produzindo erro [duplicado]
Esta pergunta já tem uma resposta aqui:
Angular 2 - Duas diretivas estruturais no mesmo elemento DOM [duplicado] 1 respostaEu tenho uma variedade de usuários e quero mostrar apenas usuários do sexo masculino na mesa. Aqui está como eu estou tentando conseguir isso:
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);
mas estou recebendo o seguinte erro:
EXCEÇÃO: TypeError: Não é possível ler a propriedade 'gender' de undefined
como você pode ver, estou usando * ngFor e * ngIf no mesmo elemento, ou seja,tr
. Por que não posso usar * ngFor e * ngIf no mesmo elemento? Existe alguma outra maneira de conseguir isso? Eu reproduzi o problemaaqui no plunker você pode ver o erro no console.