javascript – Angular2 – * ngFor和* ngIf对同一元素产生错误

前端之家收集整理的这篇文章主要介绍了javascript – Angular2 – * ngFor和* ngIf对同一元素产生错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Angular 2 – Two structural directives on the same DOM element 1个
我有一组用户,我想只在桌面上显示男性用户.以下是我试图实现这一目标的方法
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",{
            name: "Javeria",gender: "female"
        }
    ]
}

bootstrap(AppCmp);@H_301_4@ 
 

但我收到以下错误

EXCEPTION: TypeError: Cannot read property ‘gender’ of undefined

你可以看到我在同一元素即tr上使用* ngFor和* ngIf.为什么我不能在同一个元素上使用* ngFor和* ngIf?有没有其他方法来实现这一目标?我重新产生了问题here on plunker你可以在控制台上看到错误.

解决方法

实际上,不支持同一元素上的ngIf和ngFor.您可以使用ngIf的扩展语法来实现此功能
<tr *ngFor="#user of users">
  <template [ngIf]="user.gender == 'male'">
    <td>{{user.name}}</td>
    <td>{{user.gender}}</td>
  </template>
</tr>@H_301_4@

猜你在找的JavaScript相关文章