Angular4 - ngIf else 标签

Question

我有一个包含不同选项卡的对话框。我想为用户以及用户组使用选项卡。该对话框非常相似，因此我想将其用作通用对话框....使用的选项卡来自 ngx-bootstrap (1.6.6)

<tabset> 
    <div *ngIf="isUserEditor; else groupDetails">
        <tab heading="User details">
                Details...content 4 user
         </tab>
    </div>  
    <ng-template #groupDetails>
        <tab heading="Group details">
                Group content
         </tab>
    </ng-template>
    <tab heading="Permissions">
                Permission settings 
    </tab>
</tabset>

我面临不同的问题：

上述 if/else 的语法不起作用。即 UserDetails 的内容独立于所选选项卡显示。

a) 为什么UserDetails的内容显示在所有标签中？

b) 如果我更改为 if/then/else-Syntax UserDetails 不会显示在所有选项卡中，但 tab-heading 仍然存在。
显示顺序很烦人 - 即我在第一个位置看到权限选项卡 - 但我想把它放在最后一个位置。有没有办法实现它？ 注意： UserDetails 可能被拆分为多个选项卡，Permission 选项卡可能不是最后添加的选项卡。我正在寻找没有太多代码重复的解决方案。
如果我为 *ngIf 使用 div 容器或 ng-container 容器，是否存在差异？

老实说，我不知道这是否是 ngx-bootstrap 中的错误...但也可能是语法使用不正确...

Answer 1

1/3。对于您的第一个问题是因为您将 <tab> 包装在 <div> 中。您不需要那样处理可见性。 <tab> 有一个 [active] 输入：

<tabset>
    <tab header="User details" [active]="tabsActivity.tab1" (select)="tabToggle('tab1')">
        Details...content 4 user
    </tab>

    <tab header="Group details" [active]="tabsActivity.tab2" (select)="tabToggle('tab2')">
        Group content
    </tab>

    <tab header="Permissions" [active]="tabsActivity.tab3" (select)="tabToggle('tab3')">
        Permission settings
    </tab>
</tabset>

其中 tabsActivity 是所有选项卡状态的模型。 (select) 将通过更改 tabsActivity 属性的布尔状态来切换单个 activity 选项卡。

当您使用 [active] 时，订单问题将得到解决。

Answer 2

以下作品：

  <tabset *ngIf="isUserEditor>=0">
     <div *ngIf="isUserEditor; then userDetails else groupDetails"></div>
     <ng-template #userDetails>
        <tab heading="User details">
            Details...content 4 user
        </tab>
     </ng-template>
     <ng-template #groupDetails>
        <tab heading="Group details">
            Group content
        </tab>
     </ng-template>
     <ng-container *ngIf="true">
        <tab heading="Permissions">
            Permission settings 
        </tab>
     </ng-container>
  </tabset>

主要技巧由两部分组成：

isUserEditor 需要初始化为 -1 所以选项卡不会在最开始呈现！
如果我将最后一个选项卡也放入容器中 ==> 计算是否显示在最后完成 => 顺序仍然正确！

Angular4 - ngIf else 标签

Angular4 - ngIf else with tabs

tabs

ngx-bootstrap

angular