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

8 浏览
0 Comments

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

我有一个用户数组，我想在表格中只显示男性用户。这是我尝试实现这个目标的方法：

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
    selector: 'app',
    template:`
    

        
            

                {{user.name}}
                {{user.gender}}
            

        
    

    `
})
export class AppCmp{
    public users = [
        {
            name: "Eesa",
            gender: "male"
        },
        {
            name: "Abdullah",
            gender: "male"
        },
        {
            name: "Javeria",
            gender: "female"
        }
    ]
}
bootstrap(AppCmp);

但是我得到了以下错误：

EXCEPTION: TypeError: Cannot read property 'gender' of undefined

正如你所看到的，我在同一个元素上使用了*ngFor和*ngIf，即tr。为什么我不能在同一个元素上使用*ngFor和*ngIf？有没有其他的方法可以实现这个目标？你可以在控制台上看到我在plunker上重现了这个问题。

0

1 答案

0 Comments

在Angular中，不支持在同一个元素上同时使用ngIf和ngFor。但是可以使用扩展语法的ngIf来实现这个功能。下面是一个使用初始版本的例子：

使用最新的Angular选择器更新后的版本如下：

  
  
    {{user.name}}
    {{user.gender}}

以上是解决问题的方法，通过使用ng-container元素来包裹ngFor和ngIf指令，实现在同一元素上使用这两个指令的效果。这样就能正确地根据条件过滤和循环显示元素。

这篇文章通过提供初始版本和更新后的版本的代码，解释了为什么在同一元素上使用ngIf和ngFor会产生错误，并给出了解决方法。同时还附带了一位用户的感谢和赞赏，表达了对作者的喜爱和赞扬。

0