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

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不是， if elseif elseif else可能無法使用。 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>