Angular зацикливание проблемы с ngIf и ngFor для массивов

Question

У меня довольно специфическая c проблема, связанная с * ngIf и * ngFor (хотя я также открыт для других решений)

В моем приложении я получаю массив из пяти ролей [admin, master , член, пользователь1, пользователь2]. В зависимости от ролей мне нужно предоставить теги привязки в меню, например. если моя роль "admin", я получу <a>toAdmin</a> et c:

<ng-container *ngFor="let role of roles">
   <ul>
      <li *ngIf="role === 'admin'">
         <a mat-list-item routerLinkActive="list-item-active" routerLink="/admin">
         Admin
         </a>
      </li>
      <li *ngIf="role === 'master'">...</li>
   <ul>
</ng-container> 

Это прекрасно работает, если массив состоит только из одной роли, например. «admin» или «пользователь». Однако может случиться так, что массив «ролей» состоит из двух или более ролей, например. ['member', 'user1', 'user2'] в этом случае якорные теги будут появляться несколько раз, <a>toUser</a><a>toUser</a>.

<ng-container *ngFor="let role of roles">
   <ul>
      <li *ngIf="role === 'user1' || 'user2'">
         <a mat-list-item routerLinkActive="list-item-active" routerLink="/user">
         User
         </a>
      </li>
      <li *ngIf="role === 'master'">...</li>
   <ul>
</ng-container> 

Результат правдоподобен, во всяком случае, я хочу только один появляется якорная метка.

Как бы я совершил sh это?

Заранее благодарен за любую помощь.

Флориан

Answer 1

Количество ролей, которые пользователь имеет, не должно определять количество отображаемых ссылок.

Я вообще не вижу необходимости в этом oop, если вы заранее знаете, какие ссылки вы можете предоставить. Вы можете настроить свое полное меню, а затем применить условный фильтр.

<ng-container>
   <ul>
      <li *ngIf="user.roles.includes('admin')">
         <a mat-list-item routerLinkActive="list-item-active" routerLink="/admin">
         Admin
         </a>
      </li>
      <li *ngIf="user.roles.includes('master')">...</li>
   <ul>
</ng-container>