Что такое хороший лог c с ngif, чтобы проверить, если роль пользователя что-то и заголовок что-то

Question

Есть три item titles: Admin, Dashboards, Create Job. Для Admin я хочу просмотреть все элементы, для других - показать элементы без title having Admin.

<ng-container *ngFor="let item of menuHorService.menuList$ | async">
    <ng-container *ngIf="role=='user' && (item.title=='Dashboards' || item.title == 'Create Job')">
        <ng-container *ngIf="item.title" [ngTemplateOutlet]="menuTemplate" [ngTemplateOutletContext]="{ item: item }"></ng-container>  
    </ng-container>
    <ng-container *ngIf="role=='admin' && (item.title=='Dashboards' || item.title == 'Create Job' || item.title == 'Admin')">
        <ng-container *ngIf="item.title" [ngTemplateOutlet]="menuTemplate" [ngTemplateOutletContext]="{ item: item }"></ng-container>  
    </ng-container>
</ng-container>

Answer 1

Я бы постарался избежать сложных логи c, как это на ваш взгляд. Вместо этого добавьте лог c к вашему наблюдаемому вызову. По этой причине я бы также не стал звонить в ваш сервис напрямую с вашего HTML.

constructor(private menuHorService: MenuHorService) {}

menuList$: Observable<any[]>; // TODO: use type
role = 'user'; // TODO: implement

ngOnInit() {
  this.menuList$ = this.menuHorService.menuList$.pipe(
    map((menuList: any[]) => menuList.filter(x => this.showMenuItem(x)))
  );
}

private showMenuItem(menuItem: any): boolean {
  return menuItem.title !== 'Admin' || this.role === 'admin';
}

И тогда ваш HTML станет тривиальным. Например:

<!-- dummy html -->
<ng-container *ngFor="let item of menuList$ | async">
  <p>
    {{item | json}}
  </p>
</ng-container>

ДЕМО: https://stackblitz.com/edit/angular-4mtkxs

Answer 2

Попробуйте это:

<ng-container *ngFor="let item of menuHorService.menuList$ | async">
  <ng-container *ngIf="(role === 'admin' || item.title !== 'Admin')">
    <!-- any thing -->
  </ng-container>
</ng-container>