Question

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

public allowed: Boolean;
public myProfile: Boolean;

显示一个div或另一个div或两者都不显示的逻辑

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>

如果在ng-template和ng-container上使用其他方式

2 个答案: