ngIf和ngFor在数组上的角度循环问题

Question

我对* ngIf和* ngFor有一个非常具体的问题（不过，我也愿意接受其他解决方案）

在我的应用程序中，我得到了五个角色的数组[admin，master，member，user1，user2]。根据角色，我需要在菜单中提供锚标记，例如。如果我的角色是“管理员”，我将得到<a>toAdmin</a>等：

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

如果数组仅包含一个角色，例如，这很好。 “管理员”或“用户”。但是，“角色”数组可能包含两个或多个角色，例如。 ['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> 

无论如何，结果似乎是合理的，我只希望出现一个锚定标签。

我将如何完成？

预先感谢，感谢您的帮助。

弗洛里安语

Answer 1

用户拥有的角色数量不应该决定显示多少个链接。

如果您事先知道可以渲染的链接，我根本不需要在这里循环。您可以设置完整菜单，然后应用条件过滤器。

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