Angular2 * ngIf，其值来自* ngFor中的Object

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函数中，im检查用户是否已登录或用户是管理员。

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

我可以使用对象值作为组件中使用的变量吗？

Excample：

NaviEntry => {name: 'Admin', link: '/admin', role: 'admin'}

在我的Component => admin中：boolean = true;

模板：

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

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]"