如果其他如果其他在 ng-template 和 ng-container 上

Question

我已经声明了 2 个变量，它们会根据登录的用户而变化。

public allowed: Boolean;
public myProfile: Boolean;

显示一个div或另一个div或两者的逻辑 o 没有人

allowed === true && myProfile === true SHOW BOTH
allowed === false && myProfile === true SHOW RESET
allowed === true && myProfile === false SHOW RESTART
allowed === false &6 myProfile === false NO ONE TO SHOW

我试图将该逻辑转换为角度模板，但不起作用，我阅读了有关模板的信息，但可能无法使用if elseif elseif else我不知道该怎么做。

<ng-container 
*ngIf="allowed && myProfile then restart,reset else if !allowed && myProfile then reset else if allowed && !myProfile then restart else noone ">
</ng-container>

<ng-template #restart>
<div clas="col-sm-6">
RESTART PASSWORD
</div>
</ng-template>
<ng-template #reset>
<div clas="col-sm-6">
RESET PASSWORD
</div>
</ng-template>

也许这不是最好的方法，我愿意接受建议

Answer 1

我认为最简单的方法是这样做：

<div *ngIf="allowed === true" class="col-sm-6">
RESTART PASSWORD
</div>
<div *ngIf="myProfile === true" class="col-sm-6">
RESET PASSWORD
</div>

Answer 2

看看ngSwitch并将两个字段变成一个对象。然后，您可以执行以下操作。

<div [ngSwitch]="permission">
<ng-template *ngSwitchCase="permission.profile"></ng-template>
<ng-template *ngSwitchCase="permission.allowed && permission.profile"></ng-template>
</div>

https://angular.io/guide/structural-directives

编辑：以下是一个更干净的解决方案。这应该迎合你所有的逻辑。只需将ngIf指令添加到您需要显示/隐藏的div 上即可。您不需要将ng-templates用于您要实现的目标。

<div *ngIf="myProfile">Profile Content</div>
<div *ngIf="allowed">Allowed Content</div>