Angular2隐藏元素类成员

时间:2016-07-08 16:22:52

标签: html angular angular-material2

我尝试使用* ngIf来显示和隐藏基于其构建的类成员的元素。但我仍然遇到以下错误,尽管能够使用其他数据成员来显示标题等。

TypeError: Cannot read property 'hidden' of undefined

我的HTML看起来像

...
<md-list-item *ngFor="let navigation of flatNavList"
  (click)="onSelect(navigation)" *ngIf="navigation.hidden==false">
  {{navigation.title}}
</md-list-item>
...

我的* component.ts文件中的导航数组定义为

...
flatNavList: Navigation[];
...

和Navigation类看起来像

export class Navigation {
    constructor(
        public name: string,
        public title: string,
        public icon: string,
        public location: string,
        public hidden: boolean,
        public roles: string[],
        public children: Navigation[]
    ) { }
}

如果我删除了* ngIf,一切都很好。为什么我可以使用navigation.title来显示名称,但我无法使用navigation.hidden来切换元素是否显示?

EDIT ------------------------------

[hidden]="navigation.hidden"

但有几篇文章说这在Angular 2中是不好的做法

1 个答案:

答案 0 :(得分:0)

有时似乎未定义导航。 所以首先测试它,然后检查它的隐藏属性:

*ngIf="navigation && !navigation.hidden"