Angular 2隐藏/显示模板

Question

是否有可能隐藏并显示特定人物查询的div？ 我知道有一个ngIf和hidden，但它们都使用布尔值。

我想要一些喜欢的东西

＆＃13;

＆＃13;

User.Admin = 'admin',
User.Worker = 'worker',
User.HelpDesk ='helpDesk'

＆＃13;

<div ngIf="User.Admin">
  show content
</div>

＆＃13;

＆＃13;

＆＃13;

这有可能吗？

事先提前

Answer 1

如果您只想显示一个html元素，可以使用*ngIf轻松完成此操作：

<div *ngIf="User.Admin === 'admin'">
  show content
</div>

如果您喜欢角色变量而不是3个标志，则可以执行以下操作：

<div [ngSwitch]="User.Role">
    <div *ngSwitchCase="'admin'">
        <!-- content for admin -->
    </div>
    <div *ngSwitchCase="'worker'">
        <!-- content for worker -->
    </div>
    <div *ngSwitchCase="'helpdesk'">
        <!-- content for helpdesk -->
    </div>
</div>

Answer 2

如果由于性能不想使用* ngIf，您可以替代使用：

`[style.visibility]`

像： <div [style.visibility]=" (User.Admin === 'admin') ? 'hidden' : 'visible'> <!-- content --> </div>"