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

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

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

示例：

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

在我的组件中 => 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]"

Angular2 ngIf 的值来自 ngFor 中的 Object

Angular2 ngIf with a value from Object inside ngFor

angular-ng-if

ngfor

angular

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

Angular2 *ngIf with a value from Object inside *ngFor

angular-ng-if

ngfor

angular

Angular2 ngIf 的值来自 ngFor 中的 Object

Angular2 ngIf with a value from Object inside ngFor