Angular2 - * ngFor y * ngIf en el mismo elemento produciendo error [duplicado]
Esta pregunta ya tiene una respuesta aquí:
Angular 2: dos directivas estructurales sobre el mismo elemento DOM [duplicado] 1 respuestaTengo una gran variedad de usuarios y quiero mostrar solo usuarios masculinos en la tabla. Así es como estoy tratando de lograr esto:
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);
pero recibo el siguiente error:
EXCEPCIÓN: TypeError: no se puede leer la propiedad 'género' de indefinido
como puede ver, estoy usando * ngFor y * ngIf en el mismo elemento, es decirtr
. ¿Por qué no puedo usar * ngFor y * ngIf en el mismo elemento? ¿Hay alguna otra forma de lograr esto? Re-produje el problemaaquí en plunker Puedes ver el error en la consola.