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