Question

无论当前用户是admin还是不是，我都试图显示一个按钮（该对话框打开一个对话框组件）。问题是我不知道怎么做。

这是我组件的html

<app-list [items]="items"
  [page]="'1'"
  [itemsPerPage]="'40'"
  [hasPager]="false"
  [hasFilters]="false"
  [itemInfo]="itemInfo"
  [loading]="loading"
  (onAdd)="handleOnAdd($event)"  -> this one renders the button
  (onMenuItem)="handleOnMenuItem($event)">
</app-list>

在应用列表组件中：

<app-add-button *ngIf="itemInfo.types"
  [hasPager]="hasPager"
  (onAction)="onAdd.emit($event)">
</app-add-button>

// .ts
  @Output() onAdd = new EventEmitter();

我想要做的是这样的事情：

  [loading]="loading"
  *ngIf="loggedUser.coachAdmin"
  (onAdd)="handleOnAdd($event)"
  (onMenuItem)="handleOnMenuItem($event)">

仅当用户是管理员时才显示按钮（或至少使其起作用）。有这样的办法吗？或至少如何解决？

Answer 1

我不确定coachAdmin是否为布尔变量。如果不是，则必须将ngIf更改为以下形式：

*ngIf="loggedUser.coachAdmin==='ADMIN'"

Answer 2

首先，在评论中回答您的问题：

我很好奇我是否可以编写ngIf来显示/隐藏（onAdd）=“ handleOnAdd（$ event）”

否，您不能使用*ngIf来“显示/隐藏” (onAdd)属性。

如果要显示/隐藏组件，则发布的代码（*ngIf="loggedUser.coachAdmin"）应该可以正常工作。

但是，如果您要有条件地执行一些代码（取决于用户是否是admin），则应在组件类定义中处理该代码。

Answer 3

您可以使用[隐藏]尝试另一种方式

[hidden]="loggedUser.coachAdmin !== 'ADMIN'"

Answer 4

如果您只想为管理员显示按钮，只需将其作为条件添加到*ngIf中即可：

<app-add-button *ngIf="itemInfo.types && loggedUser.coachAdmin"
  [hasPager]="hasPager"
  (onAction)="onAdd.emit($event)">
</app-add-button>

如果您希望它仅对管理员具有功能，那么最快捷的方法是进行短路逻辑检查：

<app-add-button *ngIf="itemInfo.types"
  [hasPager]="hasPager"
  (onAction)="loggedUser.coachAdmin && onAdd.emit($event)">
</app-add-button>

Angular 2显示和隐藏按钮组件

4 个答案: