首页 文章

Angular2 - * ngFor和* ngIf在同一元素上产生错误[重复]

提问于
浏览 次
7

这个问题在这里已有答案：

我有一组用户，我想只在桌面上显示男性用户 . 以下是我试图实现这一目标的方法：

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：无法读取未定义的属性“gender”

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

javascript angular

1 回答

  • 20

    实际上，不支持同一元素上的ngIf和ngFor . 您可以使用 ngIf 的扩展语法来实现此目的：

    <tr *ngFor="#user of users">
  <template [ngIf]="user.gender == 'male'">
    <td>{{user.name}}</td>
    <td>{{user.gender}}</td>
  </template>
</tr>
    回复于

相关问题