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 - 语法UserDetails未显示在所有选项卡中，但选项卡标题仍然存在。
显示顺序很烦人 - 即我在第一个位置看到权限标签 - 但我想把它放在最后一个位置。有没有办法实现它？ 注意： UserDetails可能会被拆分为多个标签，Permission标签可能不是最后一个要添加的标签。我正在寻找一种没有太多代码重复的解决方案。
如果我用于*ngIf div容器或ng-container？

老实说，我不知道这是ngx-bootstrap中的错误还是没有...但它也可能是错误的语法用法......

Answer 1

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

<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属性的布尔状态来切换标签的各个活动。

使用[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，因此标签最初不会呈现！
如果我将最后一个标签也放入容器中==＆gt;如果显示或不显示的计算是在最后的=>结束时完成的订单仍然正确！

Angular4 - ngIf其他包含标签

2 个答案: