Question

我想在* ngFor中使用* ngIf，其中我的角色值是为该元素定义的。

我的模板看起来像这样：

<li class="nav-item" *ngFor="let entry of naviEntries">
      <button *ngIf="{{entry.role}}" ...>{{entry.name}}</button>
</li>

在我的组件中：

enter code here`export class NaviComponent implements OnInit {
    naviEntries: NaviEntry[];
    visitor: boolean = true;
    user: boolean = false;
    admin: boolean = false;

    constructor() { ... }

    ngOnInit() {
        ...
        this.naviEntries.push({name: 'Home', link: '', role: 'visitor'});
        this.naviEntries.push({name: 'User', link: '/user', role: 'user'});
        this.naviEntries.push({name: 'Admin', link: '/admin', role: 'admin'});
        ...

在ngOnInit函数内部，我要检查用户是否已登录或用户是否为管理员。

现在我想检查* ngIf是否允许NaviEntries推送的对象显示在Navi

我可以将对象值用作我的Component中使用的变量吗？

Excample：

NaviEntry =＆gt; {name: 'Admin', link: '/admin', role: 'admin'}

在我的Component =＆gt; admin：boolean = true;

模板：

*ngIf="{{entry.role}}" =＆gt; * ngIf =“admin”=＆gt; true =＆gt;显示项目

Answer 1

我认为你需要这样的东西：

*ngIf="(entry.role === 'admin' && admin) || (entry.role === 'visitor' && visitor) || (entry.role === 'user' && user)"

请阅读：

https://angular.io/api/common/NgIf

因为你使用它有点错误。

优化方式：

// component side
roleAccess = {'admin' : false , 'user' : false , 'visitor' : true}

// template side
*ngIf="roleAccess[entry.role]"

Angular2 * ngIf，其值来自* ng For

1 个答案: