Angular2-*ngFor和*ngIf在同一个元素上产生错误

Angular2 - *ngFor and *ngIf on same element producing error

本文关键字：错误 元素 ngFor ngIf Angular2- 同一个      更新时间：2023-09-26

我有一个用户数组，我想在表上只显示男性用户。以下是我如何努力实现这一目标：

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);

但我得到了以下错误：

异常：TypeError：无法读取未定义的属性"gender"

正如你所看到的，我在同一个元素上使用*ngFor和*ngIf，即tr。为什么我不能在同一个元素上使用*ngFor和*ngIf？还有其他方法可以做到这一点吗？我在plunker上重新生成了这个问题，你可以在控制台上看到错误。

事实上，同一元素上不支持ngIf和ngFor。您可以使用ngIf的扩展语法来实现这一点：

初始版本：

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

使用最新的Angular选择器更新了版本。

<ng-container *ngFor="let user of users">  
  <tr *ngIf="user.gender == 'male'">
    <td>{{user.name}}</td>
    <td>{{user.gender}}</td>
  </tr>
</ng-container>
相关文章：