Как сделать динамически * ngxPermissionsOnly в угловых 5? - PullRequest
Новая
       10

Как сделать динамически * ngxPermissionsOnly в угловых 5?

0 голосов
/ 04 июля 2018

Я создал меню динамически и должен отображаться в соответствии с разрешением, но * ngxPermissions только не работает. Пожалуйста, подскажите, что я делаю не так. 

this.sidebarnavItems = [{
        path: '', title: 'User Managment', icon: 'icon-Double-Circle', class: 'has-arrow', label: '', labelClass: '', extralink: false, permission:'',
        submenu: [
            { path: '/user/vuser', title: 'User', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:''},
            { path: '/user/vstudent', title: 'Student', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:"'5','6','7','8'"},
            { path: '/user/vfaculty', title: 'Faculty', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:''},

        ]
    }]
<html>


<ul class="collapse" *ngIf="sidebarnavItem.submenu.length > 0" [ngClass]="{'in' : showMenu === sidebarnavItem.title }">
                    <li *ngFor="let sidebarnavSubItem of sidebarnavItem.submenu" [class.active]="showSubMenu === sidebarnavSubItem.title" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'active'" >
                      <span *ngxPermissionsOnly = "[sidebarnavSubItem.permission]">
                        <a  [routerLink]="sidebarnavSubItem.submenu.length > 0 ? null : [sidebarnavSubItem.path]" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'router-link-active'" [ngClass]="[sidebarnavSubItem.class]" *ngIf="!sidebarnavSubItem.extralink;" (click)="addActiveClass(sidebarnavSubItem.title)" >
                            <i [ngClass]="[sidebarnavSubItem.icon]" ></i>
                                {{sidebarnavSubItem.title}}
                        </a>
                        </span>


                    </li>
                </ul>



</html>

1 Ответ

0 голосов
/ 04 июля 2018

Существует проблема с форматом ввода вашего разрешения и с тем, как вы связываете его с директивой ngxPermissionsOnly. Обновите ваш sidebarnavItems до: 

this.sidebarnavItems = [{
    path: '', title: 'User Managment', icon: 'icon-Double-Circle', class: 'has-arrow', label: '', labelClass: '', extralink: false, permission:'',
    submenu: [
        { path: '/user/vuser', title: 'User', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:[]},
        { path: '/user/vstudent', title: 'Student', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:['5','6','7','8']},
        { path: '/user/vfaculty', title: 'Faculty', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:[]},

    ]
}];

Затем обновите ваш код просмотра как: 

<ul class="collapse" *ngIf="sidebarnavItem.submenu.length > 0" [ngClass]="{'in' : showMenu === sidebarnavItem.title }">
    <li *ngFor="let sidebarnavSubItem of sidebarnavItem.submenu" [class.active]="showSubMenu === sidebarnavSubItem.title" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'active'" >
    <span *ngxPermissionsOnly = "sidebarnavSubItem.permission">
        <a  [routerLink]="sidebarnavSubItem.submenu.length > 0 ? null : [sidebarnavSubItem.path]" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'router-link-active'"
            [ngClass]="[sidebarnavSubItem.class]" *ngIf="!sidebarnavSubItem.extralink;" (click)="addActiveClass(sidebarnavSubItem.title)" >
            <i [ngClass]="[sidebarnavSubItem.icon]" ></i>
                {{sidebarnavSubItem.title}}
        </a>
    </span>
    </li>
</ul>

Итак, я только что обновил *ngxPermissionsOnly = "sidebarnavSubItem.permission", где свойство разрешения теперь является массивом в объекте sidebarnavItems.

Демо Plunker для проверки. Здесь проверьте в role.component.ts

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...